shiyiya / oplayer

:zap: Another HTM5 video player.

Home Page:https://oplayer.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iOS is unable to load videos from initial source

nadecancode opened this issue · comments

commented

https://enime.moe/watch/my-stepmom's-daughter-is-my-ex/10

However, with changeSource (for backup sources) the videos can be properly loaded.

commented

Reference #18 (comment)

I tried to load https://cache.387e6278d8e06083d813358762e0ac63.com/222869752030.m3u8 in the simulator on the main brunch build of oplayer and it worked. It definitely breaks in the simulator and iPhone. Going to full screen also does not help, but can scrub through the timeline, with no playing.

I suspect that something is wrong with your oplayer config. Hls.js should not play any role on iPhone, since it exits as soon as this code is hit:

      if (!HLS.isSupported()) {
        emit('pluginerror', {
          payload: {
            type: 'hlsNotSupported',
            message: 'hlsNotSupported'
          }
        })
        return true
      }
commented

I tried to load https://cache.387e6278d8e06083d813358762e0ac63.com/222869752030.m3u8 in the simulator on the main brunch build of oplayer and it worked. It definitely breaks in the simulator and iPhone. Going to full screen also does not help, but can scrub through the timeline, with no playing.

I suspect that something is wrong with your oplayer config. Hls.js should not play any role on iPhone, since it exits as soon as this code is hit:

      if (!HLS.isSupported()) {
        emit('pluginerror', {
          payload: {
            type: 'hlsNotSupported',
            message: 'hlsNotSupported'
          }
        })
        return true
      }

I doubt my configuration is wrong, you can check it here https://github.com/Enime-Project/enime.moe/blob/4541f3154700353edff1c34920fa607f1390d53b/components/player/index.vue#L54

I know what the problem is, it is the wrong mime type on the file:

% curl -I https://cache.387e6278d8e06083d813358762e0ac63.com/222869752030.m3u8
HTTP/2 404
date: Thu, 08 Sep 2022 10:08:06 GMT
content-type: application/json; charset=utf-8
...

% curl -I https://cdn.fshck.com/HAH/playlist.m3u8
HTTP/2 200
date: Thu, 08 Sep 2022 10:08:36 GMT
content-type: application/vnd.apple.mpegurl
...

Your's is content-type: application/json; charset=utf-8 while it should be content-type: application/vnd.apple.mpegurl

When I plugged your m3u8 file into my player, it told me unsupported media type on my iPhone.

Since the playback is handled by the iPhone itself (not HLS.js) it will require for the mime to be as it should be, not the wrong one.

commented

Uh sometimes it returns 404 but if you refresh it’ll return the correct m3u8 when it no longer 404s

commented

For 404 it’s json but when it’s 200 it returns right m3u8

Ah, interesting, I just did refresh on the iPhone in my instance of the player and it worked.

Have you tried running it with 1.0.30 of oplayer? is it only broken on 1.0.32/31?

commented

Have you tried running it with 1.0.30 of oplayer? is it only broken on 1.0.32/31?

Never tried on 1.0.30 but it looks like hls.js is still getting triggered with ios devices for initial source only. For sources that got changed after changeSource method ios handles them natively

in iPhone HLS.isSupported() returns false every time. It is triggered but then it is not used

commented

I tried to load https://cache.387e6278d8e06083d813358762e0ac63.com/222869752030.m3u8 in the simulator on the main brunch build of oplayer and it worked. It definitely breaks in the simulator and iPhone. Going to full screen also does not help, but can scrub through the timeline, with no playing.

I suspect that something is wrong with your oplayer config. Hls.js should not play any role on iPhone, since it exits as soon as this code is hit:

      if (!HLS.isSupported()) {
        emit('pluginerror', {
          payload: {
            type: 'hlsNotSupported',
            message: 'hlsNotSupported'
          }
        })
        return true
      }

Should false be returned here? lol

commented

Returning true will not set the video's src

Let me check, you might be right :)

commented

Then error should not be needed

yes, it should be false here. Hence the hls.js displayed media type not supported. 😺

how did it even work with it returning true in a first place, I tried with false and it works the same as if returning true.

load = async (source: Source) => {

This should probably be looked into, is it correct?

commented

load = async (source: Source) => {

This should probably be looked into, is it correct to 'break' in this case, not return?

Wait.. if you break here then the video src is never set because you returned true and src is only set if customLoader is false

  load = async (source: Source) => {
    for await (const plugin of this.#plugins) {
      if (plugin.load && !this.#isCustomLoader) {
        this.#isCustomLoader = await plugin.load(this, this.$video, source)
        if (this.#isCustomLoader) break
      }
    }
    if (!this.#isCustomLoader) {
      this.$video.src = source.src
    }
  }

Yes, it would seem this way, but why did it work until now? Something else is going on here.

commented

🔢

commented

I will release a new version to confirm that there are no problems.