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>
ORfunction 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 n
th 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();
}
UPDATELet'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
$(Document).Ready(Function() VS $(Function(){
Why Duck Typing Is Allowed for Classes in Typescript
How to Use Getelementsbyclassname in JavaScript-Function
How to Deeply Merge Two Object Values by Keys
How to Get Size of an Element/List in Firebase Without Get It All
How to Distinguish Mouse "Click" and "Drag"
JavaScript Getelementbyname Doesn't Work
How to Check "Checkbox" Dynamically - Jquery Mobile
React Jsx: Selecting "Selected" on Selected <Select> Option
How to Insert Variables in JavaScript Strings
What Is the JavaScript Mime Type for the Type Attribute of a Script Tag
How to Sign into Google with Selenium Automation Because of "This Browser or App May Not Be Secure."
Differencebetween React Native and React
Why Are Exceptions Used for Rejecting Promises in Js