HTML and CSS Reference
In-Depth Information
<video loop controls id="thevideo" width="320" height="240" preload="auto">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
<div id="loadingStatus">
In JavaScript, we need to create the same type of eventWindowLoaded() function that we
have created many times previously in this topic. This function is called when the
HTML page has finished loading. In eventWindowLoaded() we need to create two lis-
teners for two more events that are dispatched from the HTMLVideoElement object:
Dispatched when the video object has updated information about the loading pro-
gress of a video. We will use this event to update the percentage text in the
loadingStatus <div> .
Dispatched when the video has loaded enough that it can play in its entirety. This
event will let us know when to start playing the video.
Below is the code that creates the listeners for those events:
function eventWindowLoaded() {
var videoElement = document.getElementById("thevideo");
The updateLoadingStatus() function is called when the progress event is dispatched
from the video element. This function calculates the percent loaded by calculating the
ratio of the already-loaded bytes ( videoElement.buffered.end(0) ) by the total bytes
( videoElement.duration ), and dividing that value by 100. That value is then displayed
by setting the innerHTML property of the loadingStatus <div> , as shown in Figure 6-5 .
Remember, this is only for displaying the progress. We still need to do something once
the video has loaded.
At the time of this writing, Firefox did not support the videobuffered
property, but this was planned for Firefox version 4.0.
Search WWH ::

Custom Search