HTML and CSS Reference
In-Depth Information
}
}
</script>
</head>
<body>
<div>
<form>
Video Size: <input type="range" id="videoSize"
min="80"
max="1280"
step="1"
value="320"/>
</form>
<br>
</div>
<div>
<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"'>
</video>
</div>
</body>
</html>
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 many times what you want to do
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 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
HTML page.
This
<div>
will report the percentage of the video that has loaded when we retrieve it
through JavaScript:
