Hide controls and cursor on inactivity. fixes #333, fixes #374, fixes #3

[RavWar]

I think this is a simple solution to a very common problem of not fully being able to enjoy your favourite movie/tv-show/whatever because of unhidable controls and mouse, especially in fullscreen.

[RavWar]

I'm not sure if hiding cursor in normal screen mode is a good idea, it could disorient the user i guess.

Would love some input on this issue.

[heff]

This is a good start. #193 I believe addresses this too and it might be good to check that out.

As far as normal vs. fullscreen, this is the typical behavior I see:
both -> controls only hide if the video is playing. If the video is paused they say visible.
normal -> controls only hide when the mouse leaves the view window
fullscreen -> controls hide after a timeout

I'd like to have @gkatsev weigh in since he's been working on the mobile controls.

[RavWar]

There are still a couple of problems im not quite sure how to address:

1. Controls always visiblie during pause. Its possible to do this with an if check before fading controls out, a pause event listener to fade controls in in case they were hidden in fullscreen mode and a play event listener to trigger mousemove event so that cursor and controls would properly hide in case user used keyboard to trigger play.
   It would be much simpler with lock and unlock functions. There are lockShowing and unlockShowing, but they won't work because of !important in vjs-fade-out and vjs-fade-in, which is required to overide vjs-control-bar default hidden state. When i change default hide styles on vjs-control-bar from using visibility and opacity to display: none - i dont see any issues with slider handles, but i only checked on lastest chrome and firefox. Is this a fix for older browsers? See Lock controls when video is paused #417.
2. We need to trigger mousemove event after entering fullscreen so that everything would hide correctly even if user didn't move his cursor. I tried with

this.player_.trigger('mousemove');

But no luck. Is this supposed to work? Am i missing something?

[gkatsev]

This change currently does not affect any of the mobile/touch devices. For mobile, we probably want to have auto-hiding controls, at least when in full-screen, specifically, if it doesn't use the native players.
With a native video element, on Android devices auto-hide controls after a few seconds of no activity and when paused, the controls are always visible. On iOS, controls are always toggle-able via a tap on the video.
I am perfectly fine with adopting android-like functionality on all platforms.
We probably should not be hiding the cursor unless the video fullscreen, neither youtube nor vimeo do this. Also, I'd prefer it be done via a class rather than directly.

[motionmedia]

Where we have seen legitimate need for hiding controls is with popovers, or galleries, which open from a thumbnail, and display the player. Since the viewer in these instances has already clicked, they should expect the video to open and start to play. Further, when the video begins to play, they should not expect to have to move their cursor back over the player to get the controls to disappear.

Anytime after video starts to play, where controls are initially hidden, should the viewer move their cursor over the player, the controls should appear, but then disappear again if the cursor is moved outside the player.

[heff]

Any chance we can get the merge conflicts resolved on this one?