Geek Answers Handbook

Initial control position and video playback duration in HTML5 format

We have a video (13 minutes) that we would like to control using HTML5. We want our users to be able to control and select the parts of the video that they want to play. Preferably, this control will be carried out through 2 input fields. They will enter the start time (in seconds) in the first field and the input duration for playback (in seconds) in the second field. For example, they may want to play a video for 10 seconds and play for 15 seconds. Any suggestions or recommendations on Javascript needed for this?

Note. I found the following:

But it is addressed only to run at a specific time and does not play video for a certain period of time.

+7
source share
4 answers

You can use the timeupdate event listener.

Save the start time and length of time before the variable after the 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 the current time is longer than the start time and duration, pauses the video.

 video.addEventListener('timeupdate', function() { if(this.currentTime > videoStartTime + durationTime){ this.pause(); } });
+9
source

If you can set the start time and end time of the video when setting up the video. you can specify the start and end time in the url itself, for example

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

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

+8
source

There are many nuances for using the javascript solution proposed by Paul Sham. A much simpler way is to use the Specification URI Media Fragment . This will allow you to specify a small segment of a large audio or video file for playback. To use it, just change the source of the file you are transferring 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 original video at the specified time and end at the specified time. Browser support for media fragments is also very good, so it should work in any browser that supports HTML5.

0
source

Extend Michael Hanon's comment: IE returns buffered.length = 0 and seekable.length = 0. Video does not play. So the solution is:

src = "# video.mp4 t = 10.30"

will not work in IE. If you want to support only IE, you need to use javascript to search for the video immediately after starting from 0 seconds.

0
source

More articles:


All Articles