Video.js: Fullscreen custom element support

[artaommahe]

Can we have custom fullscreen element support in Player component? Currently i make video/hls player based on video.js on angular with custom makeup(so i turned off all default components) and i cant use Player fullscreen event, cause it uses videojs wrapper as fullscreen element, that does not include my own controls.
Also i cant create own components as videojs components, cause i need angular dependency injection and lifecycle usage, so all of them are outside of videojs wrapper element.

[gkatsev]

I see two potential solutions here:

1. move your custom controls into videojs wrapper element
2. create a custom fullscreen button that puts the element you want into fullscreen, add that one to the player and remove the default fullscreen control.

We'd be happy to help you achieve any of those if you have specific questions but we're unlikely to modify the fullscreen button to take a configured element into fullscreen. Closing the issue, discussion can continue.

[KevinBrogan]

Is it really that much trouble to allow users to specify a different element in the requestFullscreen api call?

[KevinBrogan]

@gkatsev I also need this feature. It would be a simple implementation.
Line 2627 of player.js
this.el_[fsApi.requestFullscreen]();
becomes
(this.options_.customFullscreenTarget||this.el_)[fsApi.requestFullscreen]();
I am willing to implement the feature if this issue is reopened.

Creating a custom fullscreen button doesn't work because videojs also supports fullscreen via double click. as well as....

In my use case, I have multiple videojs elements within a parent element. I can't seamlessly switch between the two elements unless the parent is fullscreened because fullscreen can't be changed without a user gesture. Otherwise I would just change the fullscreen element to be whatever element I wanted in the foreground.

This is necessary to preload a second video element that will be played after the first. Without the ability to set the fullscreen element as a custom element, I will be forced to cancel full screen as soon as the clip finishes.

My advertising implementation is also implemented as an adjacent sibling to the videojs element. If I can't have a parent element as the fullscreened element, then my advertisements will not be visible if the video is fullscreened. Creating the advertising as a videojs plugin creates a dependency on the videojs player which I need to avoid, so without this feature being implemented, I will have to disable fullscreen on videojs.

[gkatsev]

Thanks for the details comment @KevinBrogan!
This was closed before we had double-click to fullscreen (and soon to be a hotkey as well).
The recent issues around fullscreenchange event and finding out that the requestFullscreen API has a new interface that returns a promise has been leading to me think that we are due for a full refactor of how fullscreen things is happening.
Initially, I was thinking that the requestFullscreen method would accept the element to fullscreen (along with the new options that are available) but that probably does need to be a player level option.

I think the option could just be called fullscreenTarget or fullscreenElement, though, we can iron out the exact name later.

Also, fullscreen related stuff is in a bit of a flux right now due to https://github.com/videojs/video.js/issues/5745 but I'm going to re-open this. If you can submit a PR that would be awesome!

[gkatsev]

Also, while thinking about #5745 a bit, I realized we'd also need to think about whether we want to be triggering fullscreenchange on the player during these transitions as well or if a custom element is provided we never explicitly force a fullscreenchange event on the player.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.