HTML and CSS Reference
In-Depth Information
Preloading Video in JavaScript
It is often necessary to preload a video before you do anything with it. This is especially true
when using video with HTML5 Canvas, because what you want to do often goes beyond the
simple act of playing the video.
We are going to leverage the DOM and JavaScript to create a preload architecture that can be
reused andexpanded upon.Weare still notusingCanvas, butthis process will lead directly to
it.
To do this, we must first embed the video in the HTML page in the same way we have done
previouslyinthischapter.However,thistime,wearegoingtoadd
<div>
withthe
id
of
load-
ingStatus
.
NOTE
In practice, you probably would not display the loading status on the HTML page.
This
<div>
willreportthepercentage ofthevideothathasloadedwhenweretrieve itthrough
JavaScript:
<div>
<div>
<video
<video loop controls id=
"thevideo"
width=
"320"
height=
"240"
preload=
"auto"
>
<source
<source src=
"muirbeach.webm"
type=
'video/webm; codecs="vp8, vorbis"'
>
<source
<source src=
"muirbeach.mp4"
type=
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
>
<source
<source src=
"muirbeach.ogg"
type=
'video/ogg; codecs="theora, vorbis"'
>
</video>
</video>
</div>
<div
<div id=
"loadingStatus"
>
0%
</div>
</div>
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 HTMLpage
has finished loading. In
eventWindowLoaded()
, we need to create two listeners for two more
events that are dispatched from the
HTMLVideoElement
object:
