Start HTML5 Video at a Particular Position When Loading

Start HTML5 video at a particular position when loading?

You have to wait until the browser knows the duration of the video before you can seek to a particular time. So, I think you want to wait for the 'loadedmetadata' event something like this:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 50;
}, false);

How to start a HTML 5 video from a particular position?

<video id="vid1" width="320" height="240" controls loop>
<source src="Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

You have to wait until the browser knows the duration of the video before you can seek to a particular time.

     <script>
window.onload=function(){
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 200;
}, false );

};
</script>

OR

function restart1() 
{ var video1 = document.getElementById("vid1");
video1.currentTime = 0;
}

<video id="vid1" width="320" height="240" onclick="restart1();" controls>
<source src="Videos.mp4#t=03,61" type="video/mp4">
Your browser does not support the video tag.
</video>

Start a HTML5 video after a certain amount has loaded

You can read the buffered property of the video element to see what time ranges have been loaded. The buffered property is a collection of time ranges that have been loaded; you can read the start and end of the nth range with buffered.start(n) and buffered.end(n). Since you're interested in the end-time of the first range, you can read the number of seconds loaded on some video videoElm with videoElm.buffered.end(0).

A <video> element fires progress events to indicate that it has loaded a new chunk of data (and consequently that the end time of some time range in buffered is increasing).

You can check if your loaded buffer is big enough after each progress event:

var someVideo = document.getElementById("myVideoId");

someVideo.addEventListener("progress", function playOnLoad(e) {
var theVideo = e.target;
if(theVideo.buffered.length > 0 && // if we have a buffer
theVideo.buffered.end(0) >= 5) { // if first buffer is at least 5 secs
theVideo.play();
theVideo.removeEventListener(playOnLoad);
}
});

If you're actually interested in whether the video can safely play through without interruption, the browser uses the canplaythrough event. The browser will fire this event when it predicts that the loading rate of the video will allow it to play through without interruption (but it may sometimes be wrong, if the loading rate suddenly changes).

Control start position and duration of play in HTML5 video

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

HTML5 Video - Start video at certain time and play for x amount of time

In order to achieve this you need to poll the video's currentTime property as it's playing, perhaps with something like this general code...

var button = document.getElementById('play')
var video = document.getElementById('video');
var startTime = 10;
var endTime = 20;

button.addEventListener('click', playVideo, !1);

function playVideo(e) {

function checkTime() {
if (video.currentTime >= endTime) {
video.pause();
} else {
/* call checkTime every 1/10th
second until endTime */
setTimeout(checkTime, 100);
}
}

video.currentTime = startTime;
video.play();
checkTime();
}

UPDATE

Let's look at how you might implement this for your app.

You have two 'jump' buttons and a play button. When any of these buttons are activated you could call a single function which sets the start time and end time according to the HTML id of the clicked button. Those values could them be passed into something like the function I've already outlined above.

To begin with, assign an event listener to each button...

var myvideo = document.getElementById('myvideo');

/* add the same event and
handler function to each
of the three buttons */
var buttons = ['playme','jump','jump2'];

buttons.forEach(function(bn) {
document.getElementById(bn).addEventListener(
'click', buttonEvents, !1
);
});

Here each of you three HTML buttons will call a buttonEvents() function when clicked. That function might look something like this...

function buttonEvents(e) {
/* get the id of the clicked button */
var element_id = e.target.id;
/* E.G. element_id = 'playme', 'jump', or 'jump2' */

/* declare variables before setting them */
var timeStart = 0;
var timeEnd = 0;

/* set start and end values depending
on which button was clicked */
switch(element_id) {
case 'playme':
/* example values... */
timeStart = 0;
timeEnd = 100;
break;
case 'jump':
timeStart = 4;
timeEnd = 12;
break;
case 'jump2':
timeStart = 12;
timeEnd = 24;
}

/* call 'playVideo()' */
playVideo(timeStart, timeEnd);
}

Combining your 'playbutton' function with the general function outlined above would give us something like this: a function that receives a start and end time as it's arguments and plays the video if it's paused or jumps to a new start time if it's playing...

function playVideo(startTime, endTime) {

function checkTime() {
if (myvideo.currentTime >= endTime) {
myvideo.pause();
} else {
/* call checkTime every 1/10th
second until endTime */
setTimeout(checkTime, 100);
}
}

/* stop if playing (otherwise ignored) */
myvideo.pause();
/* set video start time */
myvideo.currentTime = startTime;
/* play video */
myvideo.play();
/* check the current time and
pause IF/WHEN endTime is reached */
checkTime();
}

Hope that helped.

Start playing video from a specific location using html5 video tag

Yes its possible. You can use player.currentTime attribute. see here for an example http://singintime.wordpress.com/2011/04/20/html5-video-seeking-with-javascript/



Related Topics



Leave a reply



Submit