Make sure the cursor disappear in fullscreen

[eXon]

This will make sure that the video, object or iframe tag is not overriding our attempt to hide the cursor in fullscreen.

Should fix every tech including html5, flash and iframe-based (like YouTube, see videojs/videojs-youtube#122)

[hoeness2]

I have reviewed it and vote for it +1

[heff]

Thanks for this! So was the specific issue that the youtube player was overriding the cursor style? If so could we just use !important instead of pointer-events?

I thought pointer events were supposed to block any mouse events, but clicking on the tech element still appears to toggle play/pause. So I guess that's a good thing if we need it to fix this issue.

@dmlap would you be able to do a quick test of this with what you were working on for #1291, specifically to make sure we're not removing the ability to click on the video itself to play/pause?

[eXon]

In fact the issue was with all tech. It is a lot more effective to put pointer events on vjs-tech rather than the parent element for cross browsers support

[dmlap]

@eXon: I don't get how this patch causes the cursor to disappear in fullscreen. Can you explain what's going on?

[eXon]

@dmlap The CSS cursor: none is not working over a Flash object, a video tag or an iframe because the pointer events are swallowed by them. By disabling the pointer-events when the user is in fullscreen and inactive directly on those objects, it will fix the problem. It was not working properly in every browser. With this fix, it does.

[heff]

What specific browsers/platforms are you seeing this in? I'm having trouble reproducing it.

[eXon]

@heff Chrome, IE11 and FireFox
I'm on Windows 8

Go to videojs.com, start the video, click the fullscreen button and wait the player bar to disappear
The cursor never disappear

[heff]

Ok, thanks for the browser info. I used my Win 8 VM to confirm what you were seeing.

On videojs.com it looks like the latest version of the site didn't get deployed properly, so it still had the issue where the vjs-fullscreen class wasn't getting added. That's fixed now (if you clear cache on the site).

After that fix, the cursor does now hide for me properly on videojs.com when HTML5 video is used.

With Flash however, the cursor does not hide. So it appears the issue is with Flash, at least for Core. @eXon, with the latest version of video.js and the youtube plugin, can you tell if both youtube-HTML5 and youtube-Flash suffer from this, or if it's just Flash? If it is HTML5 also, can you determine what is overriding the cursor style?

It appears something is going on with Flash that makes the cursor stay showing, but if you turn off mouse events (pointer-events:none) it fixes the issue. The downside is that while the cursor is hidden, a click does nothing. So if you want to pause the video, you have to click once to reveal the cursor, and then click again to pause the video. That's not ideal, so it makes this fix a little more complicated. So there's a few tasks here:

• Determine if this is still an issue with youtube-html5, and if so we may need to add an !important or a stronger reference to the cursor hiding to keep it from being overridden.
• I'd suggest adding the pointer-events:none to the Flash tech only, at least in core, to prevent the two-clicks needed to pause the video when the cursor is hidden. Unless we can find some other way to get around the Flash cursor issue.

One last note, I'm wondering if the cursor hiding should be scoped to just when the video is playing, like the controls.

[dmlap]

@heff: +1 to only hiding controls if the video is playing.

[heff]

@eXon, can you check if scoping your change to the flash object/embed would still fix your issue? (I'm not sure if youtube uses s for their flash player some times or just ).

object.vjs-tech, embed.vjs-tech {
  pointer-events: none;
}

[heff]

@eXon I think I saw some related stuff come through in the videojs-youtube issues. Any update on this?

[eXon]

@heff You are right. The cursor-events: none has been removed because it was causing a few problems. The main one was that their is absolutely no way to make the pause work unless you move your cursor to re-enable the player.

I've tested the last version of VJS 4.6.4 and the cursor seems to disappear on fullscreen. For the iframe-based tech, using an iframe blocker seems to work pretty well (invisible div that register mouse events on top of the iframe).

[heff]

Ok cool, good to know. Thanks!