HTML and CSS Reference
Video Size: <input type="range" id="videoSize"
<video autoplay loop controls id="theVideo" width="320" height="240">
<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"'>
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 many times what you want to do
goes beyond the simple act of playing the video.
can be reused and expanded upon. We are still not using Canvas, but this 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 previously in this chapter. However, this time, we are going to add <div> with the
id of loadingStatus .
In practice, you probably would not display the loading status on the
This <div> will report the percentage of the video that has loaded when we retrieve it