Entering into fullscreen mode on iPhone is broken

[phpb-com]

This is the error from the Web Inspector console: [Error] TypeError: undefined is not an object (evaluating 'o(this, T, U).call') enterFullscreen (chunk-KSDSIAZN.js:390) toggleFullScreen (chunk-KSDSIAZN.js:399)

  enterFullscreen() {
    this.#requestFullscreen.call(this.$root, { navigationUI: 'hide' }) // <-- this line seems to throw the error
    this.emit('fullscreenchange')
  }

https://github.com/shiyiya/oplayer/blob/f0bf039b429f634f98541269c4734322ea855985/packages/core/src/player.ts#L237

The tooltip that pops-up after the click, brings the video into semi-fullscreen that only expands into the browser window, not the true full screen. I think that it is due to the playsinline setting. I know that VideoJS is working well, but I think that they remove the playes inline prop from the video attribute when the user clicks the full screen switch. And they put it back, when the screen is returned to normal.

[shiyiya]

I don't have an IOS device, so I can't clearly know what happened from your description. Can you tell me more details ?

[phpb-com]

Ok let me try to explain better, step-by-step:

• Open page with the player
• Click on the full-screen icon
• Little tooltip icon pops-up, and JavaScript console shows the message above.
• Observe no change in the player size
• Clock on the tooltip icon (square with two arrows pointing in diagonal opposing directions)
• Observe video go into full screen.

If you want me to try and catch a video or screenshot, I can try that too.

[phpb-com]

Same goes for the exit from the full screen mode.

[shiyiya]

catch a video or screenshot. provide JavaScript console msg raw message or screenshot. thanks.

[phpb-com]

[phpb-com]

Console errors are the ones that I posted in the first message:

[Error] TypeError: undefined is not an object (evaluating 'o(this, T, U).call')
enterFullscreen (chunk-KSDSIAZN.js:390)
toggleFullScreen (chunk-KSDSIAZN.js:399)

[shiyiya]

Did you click the webfullscreen button？

[phpb-com]

yes, I had to click this button to go into full screen, the one bellow (dashed square) works directly on the Mac (Shrome/Safari)

[shiyiya]

This error message indicates that I can't locate the source code. Is it convenient to run the program in the debugger mode to trace the source code? Or wait for me to generate the sourcemap.

[phpb-com]

I am not sure how I can run client-side (on iPhone or Simulator) debugger mode. Here is the exact (screenshot) message that I can capture from the run.

[shiyiya]

@phpb-com Try it again

[phpb-com]

I think it is broken now, since that is the page I am getting.

[phpb-com]

Some more logs from the console, if it helps:

[Error] TypeError: null is not an object (evaluating 'a.children')
p — 9dd8a0d2.be232ddf.js:1:56107
(anonymous function) — 9dd8a0d2.be232ddf.js:1:56174
ae — 9dd8a0d2.be232ddf.js:1:57178
ze — 9dd8a0d2.be232ddf.js:1:65606
(anonymous function) — 9dd8a0d2.be232ddf.js:1:30148
forEach
(anonymous function) — 9dd8a0d2.be232ddf.js:1:30126
(anonymous function) — 9dd8a0d2.be232ddf.js:1:28989
(anonymous function) — 9dd8a0d2.be232ddf.js:1:11679
Ns — main.56b06744.js:2:282532
Ns
(anonymous function) — main.56b06744.js:2:343769
Ps — main.56b06744.js:2:279157
ys — main.56b06744.js:2:275268
ms — main.56b06744.js:2:272399
eu — main.56b06744.js:2:288484
(anonymous function) — main.56b06744.js:2:289870
ks — main.56b06744.js:2:275420
iu — main.56b06744.js:2:289855
(anonymous function) — main.56b06744.js:2:15028
promiseReactionJob

    cl (main.56b06744.js:2:262136)
    (anonymous function) (main.56b06744.js:2:264566)
    ho (main.56b06744.js:2:228322)
    vl (main.56b06744.js:2:265812)
    Ns (main.56b06744.js:2:282418)
    Ns
    (anonymous function) (main.56b06744.js:2:343769)
    Ps (main.56b06744.js:2:279157)
    ys (main.56b06744.js:2:275268)
    ys
    (anonymous function) (main.56b06744.js:2:224829)
    (anonymous function) (main.56b06744.js:2:343769)
    Ya (main.56b06744.js:2:224775)
    Wa (main.56b06744.js:2:224710)
    ks (main.56b06744.js:2:275452)
    iu (main.56b06744.js:2:289855)
    (anonymous function) (main.56b06744.js:2:15028)
    promiseReactionJob

[phpb-com]

Just to note, the current deployment to you demo is not crashing any longer.

[shiyiya]

I guess ios on the full screen may also need some prerequisites, like autoplay, you need to set mute to be able to. Because on oplayer.vercel.app isFullscreenEnabled gets false.

[phpb-com]

That is OK, autoplay on almost all modern browsers requires for you to set mute to work, or to be triggered by user actions. I would not worry about that, autoplay works when it has to.

Fullscreen on iPhone devices is a trickier one. This one does not work on Edge, Chrome, Safari on iPhone latest iOS. fullscreenWeb does work, but it only enlarges video element to the full viewportal of the browser window.

[shiyiya]

https://developer.apple.com/documentation/webkitjs/document/1629974-webkitcurrentfullscreenelement

[shiyiya]

Ios can't do full screen for non-video tags, but if I put video full screen, the subtitle and danmaku will not follow the display, which is a problem.

[phpb-com]

Yes, I figured as much. Basically, it is only native interface in full screen mode. Maybe add a setting to allow user to switch it on with the caveat that danmaku like plugins will stop working?

[phpb-com]

Any chance you are going to cut a new release. I assume you made it that only fullscreenweb is available on iPhone. The one that is on your demo site seems to have it working as expected with fullscreenweb

[shiyiya]

I found that IOS safari status is not synchronized with other platforms. https://github.com/shiyiya/oplayer/commit/cd30752c67a42e2ed25805d40e472b82ffaa3bfd#diff-ec0e0d6fc804e02291c897744ff04bdc994ee8f230782ffb98ed9f7a2744df94L185

reply #7

[shiyiya]

for this issues. On IOS safari fullscreen used video element.

[phpb-com]

I found that IOS safari status is not synchronized with other platforms. cd30752#diff-ec0e0d6fc804e02291c897744ff04bdc994ee8f230782ffb98ed9f7a2744df94L185

reply #7

That is interesting, I knew that iOS always wants to be special ;-)

[shiyiya]

I find a lot of unintended behavior on IOS. lol

[phpb-com]

iOS is more like lolOS, but a big portion of people are using it so we have to deal with it :-(

I tried your demo site just now, all seems to be working as expected on iPhone. Would be great if you could cut a fresh release with all of the improvements that you just made. Huge thanks!

[shiyiya]

If you change the progress bar before clicking the play button and then click play, it will behave in many strange ways

[shiyiya]

timeupdate seeked etc. will not trigger

[phpb-com]

1.0.21 seems to work as expected, thanks for so much updates in such a short time. If you have a "beer" account where I could donate as a token of appreciation, let me know. :-)