Mixing HTML5 Video and Canvas - HTML5 Canvas - page 466

progress

Dispatched when the video object has updated information about the loading progress of
a video. We will use this event to update the percentage text in the loadingStatus <di-
v> .

canplaythrough canplaythrough

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 function eventWindowLoaded () {

var

var videoElement = document . getElementById ( "thevideo" );

videoElement . addEventListener ( 'progress' , updateLoadingStatus , false false );

videoElement . addEventListener ( 'canplaythrough' , playVideo , false

false );

}

The updateLoadingStatus() functioniscalledwhenthe progress eventisdispatchedfrom
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 ( videoEle-
ment.duration ) and then 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 after the video has
loaded.

function function updateLoadingStatus () {

var var loadingStatus = document . getElementById ( "loadingStatus" );

var

var videoElement = document . getElementById ( "thevideo" );
var var percentLoaded = parseInt ((( videoElement . buffered . end ( 0 ) /

videoElement . duration ) * 100 ));
document . getElementById ( "loadingStatus" ). innerHTML = percentLoaded + '%' ;

}