javascript - HTML 5 Video, StreamingBuffering only a certain portion of a longer video - Stack Overflow

admin管理员组

文章数量:1297023

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 wele, thanks!

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 wele, thanks!

• javascript
• html
• video

Share Improve this question Follow edited Jan 5, 2015 at 17:41 Keeno asked Mar 13, 2012 at 11:42 KeenoKeeno 1,68622 gold badges1818 silver badges2626 bronze badges 1

• keeno, video.buffered.length-1 does the trick. (0) won't work – Mustafa M Jalal Commented Jun 20, 2014 at 8:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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.

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.

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;
}

本文标签：