HLS playback does not work on the iPhone if autoplay is not set to true.

[phpb-com]

Found one bug, HLS playback does not work on the iPhone. Setting autoplay to true, makes the player work as expected on the iPhone.

Originally posted by @phpb-com in #4 (comment)

[shiyiya]

This may be a hls.js issue.

[phpb-com]

Actually, hls.js refuses to run on iPhone since MSE is not supported. The fallback is to use native video tag as is. Since I was able to play video on iPhone is autoplay is set to true, I think there must be something more to it.

[shiyiya]

I don't get what you mean, let's sort it out.

with hlsjs

autoplay : true -> not work
autoplay: false -> not work

no hlsjs

autoplay : true -> work
autoplay ：false -> work

Is this what you mean?

[shiyiya]

native suporrt HLS	autoplay	no autoplay
Chrome	N	Y
Safari	Y	Y*
Firefox	N	Y

[phpb-com]

Sorry, here is some more clarity:
if iPhone and visit OPlayer page && if autoplay = true ==> the video does not start automatically but clicking on the Play button starts it.
if iPhone and visit OPlayer page && if autoplay = false ==> the video does not start automatically and clicking on the Play button does NOT start video

[shiyiya]

• If you want the video to play automatically, you need to set it to mute mute: true.
• If or not there are throwing errors

[phpb-com]

Alright let me try to explain in a different way.

When I go on the iPhone to https://oplayer.vercel.app , I cannot start the playback. Clicking on the play button or screen or anything does not work.

In the video above I am pressing on the play button, then I try other controls, and they work.

On the other hand, when I configure my own page with the player and set autoplay option to true, the video does not start (as expected since it is not muted) but clicking on the play button start it.

[shiyiya]

• This is a autoplay example work on macsafari, macchorme, android chrome.
  

  oplayer/examples/standalone/main.ts

  Line 55 in 0a79140

  // }

[phpb-com]

Ok, lets ignore autoplay and HLS for a moment. The issue is not with that functionality. The issue is that video playback cannot be started on iPhone. The workaround that I found is to enable autoplay, then it works as expected (ignoring autoplay part for now).

[shiyiya]

Customize match to not use hls.js on IOS.
Will this work?

hlsPlugin({
  matcher: () => (isIOS ? false : source.format === 'm3u8' || /m3u8(#|\?|$)/i.test(source.src))
})

[phpb-com]

It is not related to HLS, I am also talking about your own demo player which has "https://oplayer.vercel.app/君の名は.mp4" (MP$) in it and does not use HLS. The issues is not related to HLS or autoplay. Hopefully that makes things a little more clear. See the animation of your demo site from the iPhone that show me clicking on the play button that does not trigger anything (no javascript console messages either)

[shiyiya]

Ok. I got it.

[phpb-com]

btw, the current default matcher for HLS is perfect, since it check if there are native HLS playback capabilities, and defers not to use hls.js when they are available.

[shiyiya]

The video duration is loaded but cannot be played by clicking on it, probably because the UI is obscured by other elements.

[phpb-com]

I just tried to play with the Web Inspector and see if the click actually happens. It seems it does and in the end fails to trigger the playback.

Btw, if you are on a Mac, you can get Xcode with Simulator. Simulator will give you selection of iPhones and iPads to test on a Mac. You then can connect Web Inspector from Safari to get all the debug capabilities

[phpb-com]

if we enable tracing of all events, when autoplay is set to true (when clicking on Play button is not working), we see the below output in JS console.

[Log] {type: "loadstart", payload: Event} ($videoId-W6Z2SJWN.js, line 9780)
[Log] {type: "progress", payload: Event} ($videoId-W6Z2SJWN.js, line 9780)
[Log] {type: "suspend", payload: Event} ($videoId-W6Z2SJWN.js, line 9780)
[Log] {type: "durationchange", payload: Event} ($videoId-W6Z2SJWN.js, line 9780)
[Log] {type: "loadedmetadata", payload: Event} ($videoId-W6Z2SJWN.js, line 9780)

With autoplay set to true, we see:

[Log] {type: "loadstart", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "durationchange", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "loadedmetadata", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "loadeddata", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "canplay", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "canplaythrough", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "canplay", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "canplaythrough", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "durationchange", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "progress", payload: Event} ($videoId-352B76QE.js, line 9779)
[Log] {type: "stalled", payload: Event} ($videoId-352B76QE.js, line 9779)

[phpb-com]

These are the options used to create player:

  const playerProps: ReactOPlayerProps = {
    source: { src: videoSrc, poster: videoPoster, format: 'm3u8' },
    preload: 'auto',
    playsinline: true,
    autoplay: true,
    onEvent(e): void {
      console.log(e)
    },
  }

[phpb-com]

i tried to take isMobile code path by using fake user agent in Safari on Mac, and it had no issues playing video by pressing the play button. It is something todo with

oplayer/packages/ui/src/components/CoverButton.ts

Line 52 in f1cf1b7

player.togglePlay()

I suspect.

[phpb-com]

Just tried new version, 1.0.21, and the problem is no longer there. Thanks for such a quick fix and release, you rock!