Bug: Mux React Player is not playing the video on iOS Safari 16

devwilliamy commented 7 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react

Which browsers are you using?

Safari

Which operating systems are you using?

macOS

Description

The issue is on iOS Safari 16, the video is just a black screen when you try to play it.

I've confirmed that it works on iOS Safari 17 though.

I am using Next.js 14.0.4 and am Mux 2.3.2 and Tailwind 3.3.0.

I am also using it in conjunction with the Carousel from Embla (I have a carousel of pictures and a video).

The video will play (you can hear the music) but the screen will be black.

Is there a setting that needs to be done for Safari?

My video asset was uploaded on Mux with baseline 1080p and I am using the playbackID from there. I have no extra settings on it.

Here's a snippet of my code and how I'm using it:

<div
      id="product-video"
      className="flex flex-col lg:my-4 lg:flex lg:h-[500px]"
    >
      <MuxPlayer playbackId=""  /> // I removed it

Reduced test case

No response

Steps to reproduce

I will try to get a code pen up but there's not much to it.

1. 2. 3.

Current Behavior

On Safari 16 there will be a black screen and the video ready to play. When I hit the Play button, it's still black but the video is going (you can hear the audio)

On Safari 17, it's the same, but the video will play.

Expected Behavior

The video will play

Errors

No response

What version of the package are you using?

v2.3.2

dylanjha commented 7 months ago

@devwilliamy do you have a test app where this is deployed or a codesandbox that reproduces the issue?

luwes commented 7 months ago

@devwilliamy is this in the iOS simulator? related https://github.com/muxinc/next-video/discussions/168

devwilliamy commented 7 months ago

This one was for this one: https://github.com/muxinc/next-video/discussions/155#discussioncomment-8383460

I was using this sandbox: https://codesandbox.io/p/devbox/next-video-mux-j9nn73?file=%2Fapp%2Fpage.js%3A21%2C1

I have videos in there too (sorry just noticed it seems a little choppy but you can see that the iPhone 14 on iOS 16.4 is black (it's just black when it plays though)

The muxinc/next-video#168 would show Media error Media failed to decode for both iOS 16 and 17 while for this one the video doesn't play for iOS 16.

I should also note this one I was using mux, the other one is with Vercel Blob

I also tried it from a clean create next app and next video init and tried using the json provided by next video.

muxinc / elements