11

We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?

Note: I have found the following:

But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.

Community
  • 1
  • 1
Cole Hudson
  • 130
  • 1
  • 1
  • 7

4 Answers4

13

You could use the timeupdate event listener.

Save the start time and duration time to variable after loadedmetadata event.

// Set video element to variable
var video = document.getElementById('player1');

var videoStartTime = 0;
var durationTime = 0;

video.addEventListener('loadedmetadata', function() {
  videoStartTime = 2;
  durationTime = 4;
  this.currentTime = videoStartTime;
}, false);

If current time is greater than start time plus duration, pauses the video.

video.addEventListener('timeupdate', function() {
  if(this.currentTime > videoStartTime + durationTime){
    this.pause();
  }
});
Paul Sham
  • 3,185
  • 2
  • 24
  • 31
  • Okay I've been working on using the timeupdate event listener, and I haven't been able to quite make it work. By reading around, I saw that I needed use the loadedmetadata event listener to make the videoStartTime work. `document.getElementById('player1').addEventListener('loadedmetadata', function() { var videoStartTime = 2; var durationTime = 4; this.currentTime = videoStartTime; }, false); document.getElementById('player1').addEventListener('timeupdate', function() { if (this.currentTime > videoStartTime + durationTime) { this.pause(); } }, false);` – Cole Hudson Jun 28 '12 at 13:23
  • Sorry for the inline code above. I'm trying to fix it and not succeeding. Apologies for being a noob. – Cole Hudson Jun 28 '12 at 13:51
  • @chud You can't line break in comments. I've updated my answer to include your changes. Please check to see if it's correct. I did set videoStartTime and durationTime variables outside of the `loadedmetadata` event because I think they need to be in scope for the `timeupdate` function to use them. – Paul Sham Jun 28 '12 at 14:08
  • Oh okay, I understand now. The code now works as you've written above. My next step is to modify the code where a user can set 'durationTime' and videoStartTime' using two boxes in a form and onclick they will be applied. I know `var videoStartTime = 0` and `var durationTime = 0` would stop this from happening as is. After writing an html form, I've tried the following Javascript with no luck: `function settheVariables(form) { var videoStartTime = form.time.value; video.currentTime = videoStartTime; var durationTime = form.time2.value; }` – Cole Hudson Jun 28 '12 at 15:04
  • @chud Can you try removing the `var` from within `settheVariables()`? It needs to overwrite the global variables. – Paul Sham Jun 28 '12 at 16:55
  • Okay, I removed `var` within `settheVariables()`. It allowed me to set `videoStartTime` through a box in the form; however, now `timeupdate` does not work/does not recognize this. I've uploaded my javascript here http://jsfiddle.net/chud/Rjtxw/1/ – Cole Hudson Jun 28 '12 at 17:53
  • The issue with `videoStartTime` has been figured out, and the code now works as I want (i.e. you can set start time and duration through a form). With some outside help, some `parseInt()` calls were added to `settheVariables()`. If you're interested, here's the revised javascript: http://jsfiddle.net/Rjtxw/9/. Thanks again for your help! – Cole Hudson Jun 29 '12 at 10:50
  • Interesting - a more correct answer than my independent timer - removing that answer. – Julian Jun 29 '12 at 16:24
11

If you are able to set start time and end time of video while setting the video url. you can specify the start and end time in the url itself like

src="future technology_n.mp4#t=20,50"

it will play from 20th second to 50th second.

kleopatra
  • 51,061
  • 28
  • 99
  • 211
Arvin
  • 954
  • 3
  • 14
  • 33
1

There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,end where start is the start time in seconds and end is the end time in seconds.

For example:

var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;

document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;

This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.

Jim S.
  • 1,130
  • 1
  • 9
  • 13
0

Extend to michael hanon comments: IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:

src="video.mp4#t=10,30"

will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.

Alekscs
  • 11