HTML and CSS Reference
In-Depth Information
function updateLoadingStatus() {
var loadingStatus = document.getElementById("loadingStatus");
var videoElement = document.getElementById("thevideo");
var percentLoaded = parseInt(((videoElement.buffered.end(0) /
videoElement.duration) * 100));
document.getElementById("loadingStatus").innerHTML = percentLoaded + '%';
}
Figure 6-5. Preloading a video in JavaScript
The
playVideo()
function is called when the
video
object dispatches a
canplay
through
event.
playVideo()
calls the
play()
function of the
video
object, and the video
starts to play:
function playVideo() {
var videoElement = document.getElementById("thevideo");
videoElement.play();
}
Example 6-5
gives the full code for preloading video.
Example 6-5. Basic HTML5 preloading video
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX5: Basic HTML5 Preloading Video</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
var videoElement = document.getElementById("thevideo");
