Getting "Playback cannot continue. No available working or supported playlists." error on iPad Chrome for a FairPlay stream.

[daniel-inka]

Hi,

I have a very odd issue occurs only on a specific case as below:

• Device: iPad Pro with M1 and iPad sixth generation (couldn't test it on other iPad models)
• Browser: Google Chrome for iPadOS
• HLS stream: https://eacademy.cwgv.com.tw/course/MISCFA0001/trailer/hls/master.m3u8 (protected by FairPlay DRM)
• Player: VideoJS 7.19.2 with videojs-contrib-eme plugin 4.0.1

Since Chrome for iOS/iPadOS is based on Webkit, it supports Apple's FairPlay DRM instead of Google Widevine.
And the above HLS stream works fine with FairPlay DRM protection on iOS Chrome, iOS Safari, and iPadOS Safari.
When I change any of the above combination, it just works fine.

To make sure if the issue is about VideoJS player only, I made a test page to test the same content on various HTML5 players. (Other players have no issue with the same environment and content)

I hope someone can check the above test page on iPad Chrome and figure out how to fix the issue.

[alexlol76]

Hi! @daniel-inka
Have you found a solution to this problem?

[daniel-inka]

Hi @alexlol76
I'm sorry, but I don't know if there's any solution or whether it's fixed now.
It's been quite long and the issue was not that much critical.

[alexlol76]

@daniel-inka
Thanks for the reply!
At the moment from a real iPad device on the Pallycon Videojs demo page the playback works, but with the same player setting and DRM as on the demo page, unfortunately, it doesn't work

[alexlol76]

I found a solution to this problem, in our case... We had the property overrideNative: !videojs.browser.IS_SAFARI (https://github.com/videojs/http-streaming?tab=readme-ov-file#overridenative).
We need the value false for iPad to make it work for other browsers.

As a result, the following implementation came out:

const isOverrideNative = () => {
  const isSafari = videojs.browser.IS_SAFARI;
  const isIPad = videojs.browser.IS_IPAD;

  if (isIPad && !isSafari) {
    return false;
  }

  return !isSafari;
};

...
html5: {
      vhs: {
        overrideNative: isOverrideNative(),
      },
    },
...

FYI @daniel-inka

[daniel-inka]

hi @alexlol76
thank you for sharing your solution for the issue.
let me check it with my dev team.