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
Is It Bad to Use Uppercase Letters for HTML Tags
How to Change the Color of Font Awesome's Cog Icon
How to Do Awesome Refreshless Page Changes Like Github Do
How to Set Div's Height in CSS and HTML
Disable Form Autofill in Chrome Without Disabling Autocomplete
Will the <B> and <I> Tags Ever Become Deprecated
<Video> Plays in Other Browsers, But Not Safari
What's the Purpose of the HTML "Nonce" Attribute for Script and Style Elements
How to Keep :Active CSS Style After Click a Button
Change Name of Download in JavaScript
How to Force Table Cell <Td> Content to Wrap
Fill Remaining Vertical Space - Only CSS
Twitter Bootstrap Multiple Accordions But Only One Open Panel at a Time
Form Inline Inside a Form Horizontal in Twitter Bootstrap
Style Not Working for Innerhtml in Angular