Mirror
/
html5demos
mirror of https://github.com/Erreur32/html5demos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Closes #12 - I got hung up on being told this wasn't The Right Way(tm), but I don't believe there's *any* right way to sort out this race condition crap. Anyway, this change now means there shouldn't be any race condition issues - the downside being that the content isn't indexed (if video ever was) and doesn't work for those with JavaScript off :(

This commit is contained in:
remy 2011-05-17 16:23:33 +01:00
parent 3ba2931b6d
commit 58b8163c5d
1 changed files with 47 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
demos/video.html
View File

@ -1,10 +1,6 @@
<title>Video</title>
<article>
<video>
<source src="assets/dizzy.mp4" />
<source src="assets/dizzy.webm" />
<source src="assets/dizzy.ogv" />
</video>
<p id="altmsg">It doesn't appear that your browser supports native video, sorry :(</p>
<p id="controls">
<input type="button" id="play" value="play">
<span id="position">00:00</span> / <span id="duration">loading...</span>
@ -13,14 +9,49 @@
<p>Note that (at time of writing) <a href="http://webkit.org/" title="The WebKit Open Source Project">Webkit nightly</a> supports full screen mode, which will add a button above.</p>
</article>
<script>
var video = document.querySelector('video'),
togglePlay = document.querySelector('#play'),
position = document.querySelector('#position'),
using = document.querySelector('#using'),
/*
Note that this example used to contain the video inline in the HTML above.
However, since it's been understood that there's the possible risk of a race
condition (which I'll explain in a moment), it means the best way to prevent
this problem is to generate the video element attaching the events, and only
once all this is in place, assign the source and insert the element.
Other possible alternatives would be to listen on the window object for the
loadedmetadata event and to check the event.target with the element we're
interested in, but it would require the script at the top of the code -
which would block, and that's something I prefer not to do.
Another alternative is to put inline event handlers in the markup, again
this is something I prefer not to do.
I was called out by a couple of eager folk, one suggesting that what we had
before wasn't The Right Way(tm) - which frankly, ultimately, since we can't
attach the event handlers like we would anything else (though technically
an image element is subject to the same problems), I argue that there's
therefore No Right Way(tm) to achieve this. Anyway, this change is for
them. I know they'll love me a little more for it. Maybe. Perhaps. ...
*/
var container = document.getElementById('altmsg'),
video = document.createElement('video'),
source, // support will be detected
togglePlay = document.getElementById('play'),
position = document.getElementById('position'),
using = document.getElementById('using'),
ready = false,
controls = document.querySelector('#controls'),
controls = document.getElementById('controls'),
fullscreen = null;
if (video.canPlayType('video/webm')) {
source = 'assets/dizzy.webm';
} else if (video.canPlayType('video/mp4')) {
source = 'assets/dizzy.mp4';
} else if (video.canPlayType('video/ogv')) {
source = 'assets/dizzy.ogv';
}
addEvent(togglePlay, 'click', function () {
if (ready) {
video.playbackRate = 0.5;
@ -59,9 +90,14 @@ addEvent(video, 'loadedmetadata', function () {
video.webkitEnterFullScreen();
});
}
});
if (source) {
video.src = source;
console.log(video);
container.parentNode.replaceChild(video, container);
}
function asTime(t) {
t = Math.round(t);
var s = t % 60;