CODEWITHSUNDEEP
htmlvideohtml5-video
Wal
Wal

Reputation: 172

HTML 5 Video seek/chapters

I've got a long .m4v video file (~ 1 hour) on my server,but I want to show a video on my site (HTML-5 ) that only show's subsections of it (e.g minutes 3 -> 5 followed by minutes 19 -> 20). So the video my users see is only 5 mins long.

Is anyone aware of any current HTML-5 video players or clever tricks that would support this use case ? I guess the functionality I want is like the quicktime reference file, but in HTML5 -video so that if my users play the video through they only see the 'sub-sections' and nothing in between.

Any help appreciated.

Upvotes: 1

Views: 4703

Answers (2)

Hurricane Jane
Hurricane Jane

Reputation: 35

I agree with brianchirls. Media fragments work great and it's so little code!

Another option is to use the awesome built-in listeners for the HTML5 video tag.

You can do something like the following:

video = document.getElementByTagName('video')[0];
insAndOuts = [{in: 3, out: 5}, {in: 19, out: 20}];

video.addEventListener('loadeddata', function(){
  video.currentTime = insAndOuts[0].in;
});

var nextTime = function(time){
  var ends = _.map(insAndOuts, function(x){ return x.out});
  return ends.indexOf(time) + 1;
};

video.addEventListener('timeupdate', function(){
  var nextIndex = nextTime(video.currentTime)
  if(nextIndex > 0) {
    video.currentTime = insAndOuts[nextIndex].in;
  }
});

To the best of my recollection this is basically what that popcorn sequence thing from brianchirls' post. This will work on all browsers, but it's a lot of code to manage.

Upvotes: 0

brianchirls
brianchirls

Reputation: 7853

You can use Media Fragments URIs to tell the browser to only request a portion of the video file from the server.

For example, to retrieve this video from 10 seconds to 20 seconds, set your video source(s) using a url like this:

<video src="myvideo.webm#t=10,20"></video>

As usual, this will not work in Internet Explorer.

You'll still need to stitch the multiple video fragments together in order. You can put an "ended" event listener on each one to queue up the next video, or you can use a library like popcorn.sequence

Upvotes: 2

Related Questions