Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Show and hide controls with mousemove / Select 'Off' in subtitles menu by default #193

wants to merge 3 commits into from

4 participants


Whoops, I intended these to be separate but it looks like all of my updates have been combined into one pull request now. Here's some info, I hope these are helpful!

1) Show and hide controls with mousemove (src/controls.js, src/lib.js)
I'm just now noticing that you have a new fullscreen events branch, so maybe this is redundant. No hard feelings if you don't want to use my update. Previously, the player would show the control bar whenever the mouse is hovering over the player, and since the mouse is always hovering over the player while in fullscreen mode, the controls would always be visible then. So I've replaced that with a new method involving mousemove events. To sum up, every time the mouse is moved over the player, the control bar fades in and then a timed event is set to fade out the control bar after 1.5 seconds. I left a lot of comments in the code so there's more explanation in there. Unfortunately I wasn't able to test this in IE8 and below since 3.2.2 seems broken in IE8 and below at the moment, but it seems to work well with everything else.

UPDATED: I fixed a rather obvious shortcoming with yesterday's code: touch devices weren't being accounted for. So I've added a new isTouchDevice() check to lib.js to ensure that non-iOS devices can be tested for, which uses the latest detection from Modernizr ( and if that returns true, then the control bar is always shown just like the player's previous behavior for tablets. I've only tested this on an iPad (1st gen) so far but this should work in theory for Android tablets, Windows tablets, etc.

2) Select 'Off' in subtitles menu by default (src/tracks.js)
I thought it was a little weird that nothing in the subtitles menu is selected by default, and that you can then click to select 'Off' if you want but nothing changes. The menu already effectively defaults to 'Off' so this just confirms it.


Nice work! I haven't tested it too thoroughly, but I've implemented this code and so far it's working great.

Edit: I'm talking about the mousemove stuff, I didn't notice the subtitles fix ;)


Note: for version 3.2.0 I needed to replace the .on with .addEvent for the mouse idling feature that is a part of this pull request.


@stevecochrane Sorry I didn't get this pulled in. I made change (2) manually and I believe there's another pull request working on change (1) in the new 4.0 codebase. #403 . Let me know if you think that's a good approach. Thanks for your help.

@heff heff closed this

That's totally fine. My pull request is 10 months old now so that new pull request must be better. I actually can't figure out how to make a build of the 4.0 version (not familiar with Node.js yet) so I haven't gotten to try it but if it's okay with you and the other contributors then it's okay with me.

@heff heff referenced this pull request from a commit in heff/video.js
Steve Heffernan Control bar overhaul to fix multiple issues. #556, #500, #374, #281, #… ccabf60
@heff heff referenced this pull request

Control bar updates #672

@heff heff referenced this pull request from a commit
Andy Niccolai Close GH-672: Control bar updates. Fixes #556, Fixes #500, Fixes #374,…
… Fixes #403, Fixes #441, Fixes #193, Fixes #602, Fixes #561, Fixes #281

Thanks for you help on this @stevecochrane. I started from your controls hiding changes. If you have any feedback let me know.


Great, I'm glad that was helpful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 1, 2012
  1. @stevecochrane
Commits on Jun 5, 2012
  1. @stevecochrane

    The control bar is now shown and hidden with mousemove events instead…

    stevecochrane authored
    … of the previous hover method, to allow the control bar to be hidden while in fullscreen mode.
Commits on Jun 6, 2012
  1. @stevecochrane
This page is out of date. Refresh to see the latest.
Showing with 71 additions and 3 deletions.
  1. +69 −3 src/controls.js
  2. +1 −0  src/lib.js
  3. +1 −0  src/tracks.js
72 src/controls.js
@@ -28,14 +28,80 @@ _V_.ControlBar = _V_.Component.extend({
init: function(player, options){
+ var didMousemove = false,
+ mousedOverControls = false,
+ fadeOutTimeout,
+ placeholderFadeIn,
+ placeholderFadeOut;
this._super(player, options);"play", this.proxy(function(){
- this.fadeIn();
- this.player.on("mouseover", this.proxy(this.fadeIn));
- this.player.on("mouseout", this.proxy(this.fadeOut));
+ // When the player is first initialized, trigger the mousemove switch to
+ // show the control bar at first.
+ didMousemove = true;
+ // These placeholders are to store the function calls for use in the interval below.
+ placeholderFadeIn = this.proxy(this.fadeIn);
+ placeholderFadeOut = this.proxy(this.fadeOut);
+ // When the mouse is moved over the player, trigger this switch for the below interval.
+ this.player.on("mousemove", function(e) {
+ didMousemove = true;
+ });
+ // When mousing over the control bar, set a separate flag so that we can keep the
+ // control bar visible indefinitely while hovering over it.
+ this.on("mousemove", function() {
+ mousedOverControls = true;
+ });
+ // If the user mouses out of the player while over the control bar, this clears the
+ // "moused over the control bar" flag so that the control bar doesn't stay visible.
+ this.player.on("mouseout", function() {
+ mousedOverControls = false;
+ });
+ // When entering or exiting fullscreen, trigger the usual mousemove event.
+ // This is necessary because if you click the fullscreen button for browsers that
+ // support native fullscreen, the browser still thinks your mouse pointer is over
+ // the fullscreen button even after the control bar has been moved to the bottom
+ // of the screen. Because of this, the control bar would otherwise stay visible
+ // until the mouse is moved again.
+ this.player.on("fullscreenchange", function() {
+ didMousemove = true;
+ });
+ // Run an interval every 250 milliseconds instead of stuffing everything into
+ // the mousemove function itself, to prevent performance degradation.
+ //
+ setInterval(function() {
+ // Check to see if the mouse has been moved in the last 250 milliseconds
+ if (didMousemove) {
+ // If so, immediately show the controls
+ placeholderFadeIn();
+ // Clear any existing fade out instructions that are waiting to trigger
+ clearTimeout(fadeOutTimeout);
+ // If this mouse movement was not over the control bar, and if the current
+ // device isn't a touch device (since the control bar needs to be shown at all
+ // times for touch devices, since there is no mouse)...
+ if (!mousedOverControls && !_V_.isTouchDevice()) {
+ // Set the control bar to fade out in 1.5 seconds
+ fadeOutTimeout = setTimeout(function() {
+ placeholderFadeOut();
+ }, 1500);
+ }
+ // (If so, don't set the control bar to fade out, keep it visible)
+ // Reset any movement markers for next time.
+ didMousemove = false;
+ mousedOverControls = false;
+ }
+ }, 250);
createElement: function(){
1  src/lib.js
@@ -19,6 +19,7 @@ _V_.extend({
isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; },
isIPhone: function(){ return navigator.userAgent.match(/iPhone/i) !== null; },
isIOS: function(){ return VideoJS.isIPhone() || VideoJS.isIPad(); },
+ isTouchDevice: function(){ return !!('ontouchstart' in window); },
iOSVersion: function() {
var match = navigator.userAgent.match(/OS (\d+)_/i);
if (match && match[1]) { return match[1]; }
1  src/tracks.js
@@ -529,6 +529,7 @@ _V_.OffTextTrackMenuItem = _V_.TextTrackMenuItem.extend({
// Requires options.kind
options.track = { kind: options.kind, player: player, label: "Off" }
this._super(player, options);
+ this.selected(true);
onClick: function(){
Something went wrong with that request. Please try again.