Wait Until an HTML5 Video Loads

Wait until an HTML5 video loads-Typescript

I did not test this, but try casting your HTML element to a HTMLVideoElement instead of HTMLInputElement because the method .load() does not exist on HTMLInputElement type.

Cheers.

Wait until HTML5 video has finished playing

Give the video an id and create the event handler outside the event listener. Go to: PLUNKER and/or review Snippet below:

BTW, I noticed the code given has <style> and <script> tags before the starting tag of <body>. The only thing that should ever be before the <body> tag is it's only sibling that being the end tag of </head>. Copy the way the layout is in my demos and you should be OK. Place <style> in <head> and <script> before the closing tag of </body>.

SNIPPET

<!DOCTYPE html><html>
<head>
</head>
<body> <h1>index.html</h1> <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls autoplay></video>
<script> var vid = document.getElementById('vid1'); var loc = 'http://example.com'; vid.addEventListener('ended', function(e) { jumpTo(loc); }, false);
function jumpTo(url) { window.location = url; } </script></body>
</html>

HTML5 video, waiting for video end, waiting for video ready

While not replicating all your logic, this video will take the array of videos (defined in the first script block) and step through them using the ended event to advance to the next array item.

<head>
....
<script>
var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
var currentVideo = 0;

function nextVideo() {
// get the element
videoPlayer = document.getElementById("play-video")
// remove the event listener, if there is one
videoPlayer.removeEventListener('ended',nextVideo,false);

// update the source with the currentVideo from the videos array
videoPlayer.src = videos[currentVideo];
// play the video
videoPlayer.play()

// increment the currentVideo, looping at the end of the array
currentVideo = (currentVideo + 1) % videos.length

// add an event listener so when the video ends it will call the nextVideo function again
videoPlayer.addEventListener('ended', nextVideo,false);
}
</script>
</head>
<body>
...
<div class="video-player">
<video id="play-video" width="588" height="318" controls autobuffer muted>
Your browser does not support the video tag.
</video> <!--end video container -->
</div>

<script>
// call the video player
nextVideo()
</script>

HTML5 Video - File Loading Complete Event?

You can bind the "buffered" event, but (in Chrome at least) this works fine except that it doesn't call the last "buffered" event (i.e. it will detect 90%...94%...98%... but won't call on 100%).

Note: recent versions of jQuery should use .prop() instead of .attr()

To get around this I've used setInterval() to check the buffer every 500ms (where $html5Video is your <video> element:

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
if ($html5Video.attr('readyState')) {
var buffered = $html5Video.attr("buffered").end(0);
var percent = 100 * buffered / videoDuration;

//Your code here

//If finished buffering buffering quit calling it
if (buffered >= videoDuration) {
clearInterval(this.watchBuffer);
}
}
};
var watchBuffer = setInterval(updateProgressBar, 500);

Play HTML5 video after its loaded

Why don't you just use HTML5 video attributes? There's no need for javascript.

<video autoplay poster="/placeholder.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

autoplay plays the video as soon as it is loaded and poster assigns an image to stand in the video while it's loading.

You should read more here: http://www.w3schools.com/html/html5_video.asp

Delay loading of html5 video after the rest of the page finished loading

You can manually trigger the video to load and play by using '.load()' and '.play()' respectively. Target the parent of the 'source' element using 'parentElement' to accomplish this:

$(function() {
$("video.connect-bg source").each(function() {
var sourceFile = $(this).attr("data-src");
$(this).attr("src", sourceFile);
var video = this.parentElement;
video.load();
video.play();
});
});

html5 video wait for readystate == 4 after setting currentTime

Ok I solved it with the event listener seeked.

If you change the current time it changes to seeking once it's finished it goes to seeked. The loadedmetadata event is also an option, but seeked is the fastest one.

Thanks for your help.



Related Topics



Leave a reply



Submit