CODEWITHSUNDEEP
javascripthtmlvideo
Keeno
Keeno

Reputation: 1686

HTML 5 Video, Streaming / Buffering only a certain portion of a longer video

We have a long piece of video, up to 1 hour long. We want to show users small 30 second chunks of this video. It's imperative that the video does not stutter at any point.

The user can't then jump around the rest of the video, they only see the 30 second chunk.

An example would be say, a football match, the whole match is on video but clicking a button in another page would load up the full video and play just a goal.

Is this possible with HTML5 Video? Would it have anything to do with TimeRanges? Does the video have to served over a pure streaming protocol? Can we buffer the full 30 second chunk before playing it?

The goal is to cut down on the workflow required to cut out all the little clips (and the time transcoding these to all the different HTML 5 video formats), we can just throw up a trans-coded piece of footage and send the user to a section of that footage.

Your thoughts and input are most welcome, thanks!

Upvotes: 12

Views: 6961

Answers (3)

bstst
bstst

Reputation: 519

At this point in time HTML5 videos are a real PITA -- we have no real API to control the browser buffering, hence they tend to stutter on slower connections, as the browsers try to buffer intelligently, but usually do quite the opposite.

Additionally, if you only want your users to view a particular 30 second chunk of a video (I assume that would be your way of forcing users to registers to view the full videos), HTML5 is not the right choice -- it would be incredibly simple to abuse your system.

What you really need in this case is a decent Flash Player and a Media Server in the backend -- this is when you have full control.

Upvotes: 1

BigBalli
BigBalli

Reputation: 817

You can set the time using javascript (the video's currentTime property).

In case you want a custom seekbar you can do something like this:

<input type="range" step="any" id="seekbar">

var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.max = video.duration;
}
video.ondurationchange = setupSeekbar;
function seekVideo() {
  video.currentTime = seekbar.value;
}
function updateUI() {
  seekbar.value = video.currentTime;
}
seekbar.onchange = seekVideo;
video.ontimeupdate = updateUI;

function setupSeekbar() {
  seekbar.min = video.startTime;
  seekbar.max = video.startTime + video.duration;
}

If the video is streaming you will need to "calculate" the "end" time.

var lastBuffered = video.buffered.end(video.buffered.length-1);
function updateUI() {
  var lastBuffered = video.buffered.end(video.buffered.length-1);
  seekbar.min = video.startTime;
  seekbar.max = lastBuffered;
  seekbar.value = video.currentTime;
}

Upvotes: 1

Shawn Khameneh
Shawn Khameneh

Reputation: 472

You could do some of this, but then you'd be subject the the browser's own buffering. (You also can't stop it from buffering beyond X sec) Best put, you could easily have a custom seek control to restrict the ranges and stop the video when is hits the 30 second chunk.

Also, buffering is not something you can control other the tell the browser not to do it. The rest is automatic and support to force a full buffer has been removed from specs.

Anyways, just letting you know this is terrible practice and it could be done but you'll be potentially running into many issues. You could always use a service like Zencoder to help handle transcoding too. Another alternative would be to have ffmpeg or other software on the server to handle clipping and transcoding.

Upvotes: 1

Related Questions