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 + '%';
function playVideo() {
var videoElement = document.getElementById("thevideo");;
<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"'>
<div id="loadingStatus">
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
Search WWH ::

Custom Search