[Issue] Mobile Safari Playback Does Not Work

adilanchian commented 3 years ago

With the very minimal setup provided here in the docs, I am not able to the player to start playing on Mobile Safari browsers. I tap the play button and it stays stuck in a never ended loading loop. I can see the chunk requests going through in console with 200s. Not sure whats going on here. Here is my current config:

Options

{
    'timelineHoverPreviews': true,
         'plugins': {
              'mux': {
                   'data': {
                        'env_key': 'SomeEnvKey',
                        'video_title': 'SomeTitle',
                     },
                },
        },
}

Player

const newPlayer = videojs('mux-default', options);
...
<video
        style={style}
        className="video-js vjs-16-9"
        id="mux-default"
        preload="auto"
        poster={thumbnail}
        autoPlay
        playsInline
        controls
      />

Any help would be greatly appreciated

jsanford8 commented 3 years ago

Hey @adilanchian - sorry you're running into issues here. Could you set up an example on jsbin or codesandbox that reproduces the issue you're seeing? If so, we can swap in our own Mux asset and see what's going on.

james-mux commented 3 years ago

I'll have a release out shortly which contains this fix - thank you for bringing it to us and sorry you ran into it

adilanchian commented 3 years ago

Hey @jsanford8 and @james-mux !

Thanks for the quick reply here. BIG POG on the fix. Just looked over the PR, nice catch!

One thing I wanted to mention you folks is we have had a lot of trouble with just straight userAgent checking for safari and ended up pulling in this library: https://github.com/DamonOehlman/detect-browser

Been pretty amazing for the vast changes of UserAgents and what they truly mean :p

james-mux commented 3 years ago

Hey @adilanchian!

Thanks for this - we had a similar conversation about safari detection today as well! We have just released v0.1.4 with a fix, could you give it a try for us?

We'll take a look into detect-browser - thank you for mentioning it, looks like it might be a nice thing to add in for this!

adilanchian commented 3 years ago

@james-mux

Nice! Ya UA is a hard one these days...

Yes downloading it right now and getting things setup with our stack! Will report back here

adilanchian commented 3 years ago

Looks like it's working on all different Safari Platforms (Safari Mobile App [iOS, iPadOS], Safari Desktop App)

Except WKWebView [native webview] :(

Definitely a big one for us! The UserAgent I pulled from this was:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Looks like checking for AppleWebKit would do the deed!

james-mux commented 3 years ago

Thanks for letting us know about this @adilanchian and sorry you ran into it - I've got a PR up here #29 which is working when I tried it out using this demo app: https://github.com/mmafrar/swift-ios-wkwebview-demo.

Does this demo app look like a similar way of handling WKWebView compared to your implementation?

adilanchian commented 3 years ago

Sup James!

Thanks for being on top of this. Yup that looks pretty spot on to what we have.

Can do a final test with new release :)

james-mux commented 3 years ago

Thanks for staying patient with us @adilanchian, v0.1.5 is now available! Could you give it a try and let us know how you get on?

Thanks again! :)

adilanchian commented 3 years ago

@james-mux - Sorry for the late reply.

Currently taking another stab at this today so will update you on my findings!

muxinc / videojs-mux-kit

[Issue] Mobile Safari Playback Does Not Work #25

Options

Player