When Iphone & set "playsinline" attribute - need to show fullscreen button

[byungjuJin]

Have you read the FAQ and checked for duplicate open issues?
YES

Is your feature request related to a problem? Please describe.

Use Iphone.
Normally Safari only allow fullscreen when click play.
But with set "playsinline" attribute on

Describe the solution you'd like

• Shaka check if "playsinline" attribute or not, show fullscreen button (or always show fullscreen button. almost all go to fullscreen, button is not matter)
• OR make a API "playsinline" and show fullscreen button by API.

Describe alternatives you've considered

Before new feature, I should make a fullscreen button as a custom button.

Additional context

I know why someone write this : safari is the new IE

[avelad]

The ideal would be to use the standard and if it is not supported check if the webkit methods are supported:
webkitSupportsFullscreen
webkitEnterFullscreen
webkitExitFullscreen
webkitDisplayingFullscreen

Mote info in: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/

[avelad]

I can send a PR for this, if anyone is interested.

[joeyparrish]

@avelad, I'm not certain what you are proposing. It sounds different from what @byungjuJin wrote. Can you elaborate? We already have a fullscreen polyfill to use the webkit methods when they are the only ones available.

It sounded to me like what @byungjuJin was saying was this:

Solution 1: If on iOS, and playsinline attribute is not set, hide/disable fullscreen button in UI.
Solution 2: If on iOS, and playsinline attribute is not set, fullscreen button should add playsinline attribute during UI initialization.

[avelad]

On iOS, I don’t see the full screen button

[joeyparrish]

And this is in spite of having the playsinline attribute on the video element in our demo.

We have this in the fullscreen button's constructor:

    // Don't show the button if fullscreen is not supported
    if (!document.fullscreenEnabled) {
      this.button_.classList.add('shaka-hidden');
    }

And we polyfill document.fullscreenEnabled based on prefixed methods on the document, but iOS has its methods on the video element. Now I understand the issue. I have some ideas on this:

Solution 1: Make the fullscreen polyfill more in-depth, using something like document.querySelectorAll('video') inside the polyfill methods to query video elements on iOS.
Solution 2: Make the fullscreen UI button call different methods on iOS.
Solution 3: Solution 2 + add playsinline if missing.

Solution 2 is simplest. Solution 1 benefits apps that don't use our UI, but also don't have iOS-specific UI code, at the expense of more complexity.

I'm leaning toward solution 2 or 3. I think if you've built your own UI, and you support iOS, you probably already have code for this in your UI. Our UI has more context than a polyfill (is associated with a specific video element), and so it can do a good job with less code, even if that code has platform-specific details in it.