Skip to content

Commit

Permalink
change to the way I'm handling the race condition
Browse files Browse the repository at this point in the history
  • Loading branch information
remy committed Jun 29, 2011
1 parent 9b7843a commit bd1d115
Showing 1 changed file with 20 additions and 19 deletions.
39 changes: 20 additions & 19 deletions demos/video.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<title>Video</title>
<article>
<p id="altmsg">It doesn't appear that your browser supports native video, sorry :(</p>
<video>
<source src="assets/dizzy.mp4" type="video/mp4" />
<source src="assets/dizzy.webm" type="video/webm" />
<source src="assets/dizzy.ogv" type="video/ogv" />
</video>
<p id="controls">
<input type="button" id="play" value="play">
<span id="position">00:00</span> / <span id="duration">loading...</span>
Expand All @@ -24,30 +28,26 @@
Another alternative is to put inline event handlers in the markup, again
this is something I prefer not to do.
One final alternative is to create the meida element and bind the event
before dropping it in the DOM.
Instead of all of these workarounds, I'm going to test the readyState
of the media element. If readyState is > 0, then it means the metadata
has loaded, and therefore I'll have to run the event handler manually.
*/


var container = document.getElementById('altmsg'),
video = document.createElement('video'),
source, // support will be detected
var video = document.getElementsByTagName('video')[0],
togglePlay = document.getElementById('play'),
position = document.getElementById('position'),
using = document.getElementById('using'),
ready = false,
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;
// video.playbackRate = 0.5;
if (video.paused) {
if (video.ended) video.currentTime = 0;
video.play();
Expand All @@ -68,7 +68,7 @@
});

// this used to be canplay, but really it should have been loadedmetadata - sorry folks
addEvent(video, 'loadedmetadata', function () {
function loadedmetadata() {
video.muted = true;
ready = true;
document.querySelector('#duration').innerHTML = asTime(this.duration);
Expand All @@ -83,14 +83,15 @@
video.webkitEnterFullScreen();
});
}
});
}

if (source) {
video.src = source;
console.log(video);
container.parentNode.replaceChild(video, container);
if (video.readyState > 0) { // metadata is loaded already - fire the event handler manually
loadedmetadata.call(video);
} else {
addEvent(video, 'loadedmetadata', loadedmetadata);
}


function asTime(t) {
t = Math.round(t);
var s = t % 60;
Expand Down

0 comments on commit bd1d115

Please sign in to comment.