HTML and CSS Reference
In-Depth Information
videoElement.addEventListener('progress',updateLoadingStatus,false);
videoElement.addEventListener('canplaythrough',playVideo,false);
}
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 + '%';
}
function playVideo() {
var videoElement = document.getElementById("thevideo");
videoElement.play();
}
</script>
</head>
<body>
<div>
<video loop controls id="thevideo" width="320" height="240" preload="auto">
<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>
<div id="loadingStatus">
0%
</div>
</div>
</body>
</html>
A Problem with Events and Embedded Video in HTML5
Now that we have gone through this exercise, we have to give you some bad news.
While the code we presented for
CH6EX5.html
works in most HTML5-compliant web
browsers, the code stopped working in Google Chrome as we finished up the first draft
of this topic. This was upsetting because we used Chrome as our primary platform
when developing and testing all the topic's examples.
With a bit of investigation, we discovered that Chrome was not firing the
canplay
through
or
progress
events. At the same time, Firefox removed the
load
event. While
these were anecdotal occurrences, they lead to one common truth:
the HTML5
