0
without video data.
if (this.video.readyState >= this.video.HAVE_META_DATA) {
if (this.video instanceof HTMLVideoElement &&
(this.video.videoWidth == 0 || this.videoHeight == 0))
this.isAudioOnly = true;
}
// If the first frame hasn't loaded, kick off a throbber fade-in.
if (this.video.readyState >= this.video.HAVE_CURRENT_DATA)
this.firstFrameShown = true;
else
this.startFadeIn(this.throbberFader);
// We can't determine the exact buffering status, but do know if it's
// fully loaded. (If it's still loading, it will fire a progress event
// and we'll figure out the exact state then.)
this.bufferBar.setAttribute("max", 100);
if (this.video.networkState == this.video.NETWORK_LOADED)
this.bufferBar.setAttribute("value", 100);
else
this.bufferBar.setAttribute("value", 0);
},
get dynamicControls() {
// Don't fade controls for elements.
var enabled = !this.isAudioOnly;
// Allow tests to explicitly suppress the fading of controls.
if (this.video.hasAttribute("mozNoDynamicControls"))
enabled = false;
return enabled;
},
handleEvent : function (aEvent) {
this.log("Got media event ----> " + aEvent.type);
// If the binding is detached (or has been replaced by a
// newer instance of the binding), nuke our event-listeners.
if (this.videocontrols.randomID != this.randomID)
this.terminateEventListeners();
switch (aEvent.type) {
case "play":
this.playButton.setAttribute("paused", false);
break;
case "pause":
case "ended":
this.playButton.setAttribute("paused", true);
break;
case "volumechange":
this.muteButton.setAttribute("muted", this.video.muted);
break;
case "loadedmetadata":
// If a doesn't have any video data, treat it as
// and show the controls (they won't fade back out)
if (this.video instanceof HTMLVideoElement &&
(this.video.videoWidth == 0 || this.video.videoHeight == 0)) {
this.isAudioOnly = true;
this.startFadeIn(this.controlFader);
}
break;
case "loadeddata":
this.firstFrameShown = true;
break;
case "loadstart":
this.maxCurrentTimeSeen = 0;
this.isAudioOnly = (this.video instanceof HTMLAudioElement);
break;
case "durationchange":
var duration = Math.round(this.video.duration * 1000); // in ms
this.durationChange(duration);
break;
case "progress":
var loaded = aEvent.loaded;
var total = aEvent.total;
this.log("+++ load, " + loaded + " of " + total);
// When the source is streaming, the value of .total is -1. Set the
// progress bar to the maximum, since it's not useful.
if (total == -1)
total = loaded;
this.bufferBar.max = total;
this.bufferBar.value = loaded;
break;
case "timeupdate":
var currentTime = Math.round(this.video.currentTime * 1000); // in ms
var duration = Math.round(this.video.duration * 1000); // in ms
// Timeupdate events are dispatched *every frame*. Reduce workload by
// ignoring position changes that are within 333ms of the current position.
if (Math.abs(currentTime - this.lastTimeUpdate) < 333)
return;
this.lastTimeUpdate = currentTime;
this.showPosition(currentTime, duration);
break;
case "emptied":
this.bufferBar.value = 0;
break;
case "seeking":
case "waiting":
this.startFadeIn(this.throbberFader);
break;
case "seeked":
// Normally we'd expect canplaythough to fire, but if we already
// have the data cached it shouldn't fire again.
if (this.video.readyState == this.video.HAVE_ENOUGH_DATA)
this.startFadeOut(this.throbberFader);
break;
case "playing":
case "canplaythrough":
this.startFadeOut(this.throbberFader);
break;
default:
this.log("!!! event " + aEvent.type + " not handled!");
}
},
terminateEventListeners : function () {
for each (var event in this.videoEvents)
this.video.removeEventListener(event, this, false);
if (this.controlFader.timer)
clearInterval(this.controlFader.timer);
if (this.controlFader.delayTimer)
clearInterval(this.controlFader.delayTimer);
if (this.throbberFader.timer)
clearInterval(this.throbberFader.timer);
if (this.throbberFader.delayTimer)
clearTimeout(this.throbberFader.delayTimer);
this.log("--- videocontrols terminated ---");
},
durationChange : function (duration) {
if (isNaN(duration))
duration = this.maxCurrentTimeSeen;
this.log("Duration is " + duration + "ms");
this.scrubber.max = duration;
// XXX Can't set increment here, due to bug 473103. Also, doing so causes
// snapping when dragging with the mouse, so we can't just set a value for
// the arrow-keys.
//this.scrubber.increment = duration / 50;
this.scrubber.pageIncrement = Math.round(duration / 10);
},
seekToPosition : function() {
var newPosition = this.scrubber.getAttribute("value");
newPosition /= 1000; // convert from ms
this.log("+++ seeking to " + newPosition);
this.video.currentTime = newPosition;
},
showPosition : function(currentTime, duration) {
// If the duration is unknown (because the server didn't provide
// it, or the video is a stream), then we want to fudge the duration
// by using the maximum playback position that's been seen.
if (currentTime > this.maxCurrentTimeSeen)
this.maxCurrentTimeSeen = currentTime;
if (isNaN(duration)) {
duration = this.maxCurrentTimeSeen;
this.durationChange(duration);
}
this.log("time update @ " + currentTime + "ms of " + duration + "ms");
this.scrubber.value = currentTime;
// Extend the progressBar so it goes to the right-edge of the
// scrubber thumb. This is a bit tricky, due to how the thumb is
// positioned... It's flush-left at the minimum position, but
// flush-right at the maximum position (so that the full thumb is
// always visible in the 's box).
var percent = currentTime / duration;
var leftEdge = Math.floor(percent * (this.scrubber.clientWidth - this.thumbWidth));
var rightEdge = leftEdge + this.thumbWidth;
var adjPercent = rightEdge / this.scrubber.clientWidth;
// The progressBar has max=10000
this.progressBar.value = Math.round(adjPercent * 10000);
},
onMouseInOut : function (event) {
// If the controls are static, don't change anything.
if (!this.dynamicControls)
return;
// Ignore events caused by transitions between child nodes.
// Note that the videocontrols element is the same
// size as the *content area* of the video element,
// but this is not the same as the video element's
// border area if the video has border or padding.
if (this.isControlsOrDescendant(event.target) &&
this.isControlsOrDescendant(event.relatedTarget))
return;
var isMouseOver = (event.type == "mouseover");
// Suppress fading out the controls until the video has rendered
// its first frame. But since autoplay videos start off with no
// controls, let them fade-out so the controls don't get stuck on.
if (!this.firstFrameShown && !isMouseOver &&
!(this.video.autoplay && this.video.mozAutoplayEnabled))
return;
this.startFade(this.controlFader, isMouseOver);
},
startFadeIn : function (fader) {
this.startFade(fader, true);
},
startFadeOut : function (fader) {
this.startFade(fader, false);
},
startFade : function (fader, fadeIn, immediate) {
// If the fader specifies a start delay, don't immediately fade in...
// Unless there's already a fade underway, in which case we want to be
// able to immediately reverse it (eg, a seeking event right after seeked).
if (fadeIn && fader.START_DELAY && !immediate && !fader.timer) {
function delayedFadeStart(self, fader) {
self.log("Delated start timer fired.");
fader.delayTimer = null;
self.startFade(fader, true, true);
}
// If there's already a timer running, let it handle things.
if (fader.delayTimer)
return;
this.log("Delaying " + fader.name + " fade-in...");
fader.delayTimer = setTimeout(delayedFadeStart, fader.START_DELAY, this, fader);
return;
}
// Cancel any delay timer (eg, if we start fading-out before it fires)
if (fader.delayTimer) {
this.log("Canceling " + fader.name + " fade-in delay...");
clearTimeout(fader.delayTimer);
fader.delayTimer = null;
}
// If we're already fading towards the desired state (or are
// already there), then we don't need to do anything more.
var directionChange = (fader.fadingIn != fadeIn);
if (!directionChange)
return;
fader.fadingIn = fadeIn;
this.log("Fading " + fader.name + (fader.fadingIn ? " in" : " out"));
// When switching direction mid-fade, we want the reversed fade
// to complete in the same amount of time as the current fade has
// been running. So we invert the runtime.
//
// For example, if we're 20ms into a 100ms fade-in, then we want to
// fade-out over 20ms. This is done by setting the .runtime to 80ms
// (100-20), so that doFade will only animate for 20ms more.
if (fader.runtime)
fader.runtime = fader.RUNTIME_MAX - fader.runtime;
if (!fader.timer) {
fader.timer = setInterval(this.doFade, fader.RUNTIME_STEP, this, fader);
// Perform the first fade step now, notably to make a fade-in
// immediately activate the controls.
this.doFade(this, fader, -(fader.RUNTIME_STEP - 1));
}
},
doFade : function (self, fader, lateness) {
// Update elapsed time, and compute position as a percent
// of total. Last frame could run over, so clamp to 1.
fader.runtime += fader.RUNTIME_STEP + lateness;
var pos = fader.runtime / fader.RUNTIME_MAX;
if (pos > 1)
pos = 1;
// Calculate the opacity for our position in the animation.
var opacity;
if (fader.fadingIn)
opacity = Math.pow(pos, 0.5);
else
opacity = Math.pow(1 - pos, 0.5);
fader.isVisible = (opacity ? true : false);
//self.log("Fading " + fader.name + " to opacity " + opacity);
fader.element.style.opacity = opacity;
// Use .visibility to ignore mouse clicks when hidden.
if (fader.isVisible)
fader.element.style.visibility = "visible";
else
fader.element.style.visibility = "hidden";
// Is the animation done?
if (pos == 1) {
clearInterval(fader.timer);
fader.timer = null;
fader.runtime = 0;
}
},
togglePause : function () {
if (this.video.paused || this.video.ended)
this.video.play();
else
this.video.pause();
// We'll handle style changes in the event listener for
// the "play" and "pause" events, same as if content
// script was controlling video playback.
},
toggleMute : function () {
this.video.muted = !this.video.muted;
// We'll handle style changes in the event listener for
// the "volumechange" event, same as if content script was
// controlling volume.
},
isControlsOrDescendant : function (node) {
while (node) {
if (node == this.videocontrols)
return true;
node = node.parentNode;
}
return false;
},
log : function (msg) {
if (this.debug)
dump("videoctl: " + msg + "\n");
}
}) ]]>
this.Utils.onMouseInOut(event);
this.Utils.onMouseInOut(event);