Next Video Doesn't Work on Safari 16/17

[devwilliamy]

When I try to use Next Video, it works in Chrome, but it doesn't work in Safari for iOS 16 or 17. The player doesn't even show.

I tried switching to just MuxPlayer and it does show a black preview. In Safari 17 if I press play, it will play but in Safari 16, it'll "play", but you can only hear audio, the video will just be black.

Is there a setting or a config that I need to do to make Next Video work for Safari 16 and 17? Or is this just a problem that hasn't been looked at yet?

I am using Next.js 14.0.4 and am Mux 2.3.2 and next-video 0.12.0 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.

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:

'use client';
import Video from 'next-video';
export default function ProductVideo() {
  return (
    <div
      id="product-video"
      className="flex flex-col lg:my-4 lg:flex lg:h-[500px]"
    >
<Video
        playbackId="" // Removed
        muted
      />
    </div>

)

Please let me know if you need more information thanks.

[luwes]

could you post a Codesandbox online? it will help to debug.
With next-video you shouldn't have to do anything with the playback-id, it's handled internally by next-video.

See some examples here:
https://codesandbox.io/p/devbox/next-video-mux-j9nn73?file=%2Fapp%2Fpage.js%3A21%2C1
https://codesandbox.io/p/devbox/ts-next-video-mux-j6473y?file=%2Fapp%2Fpage.tsx%3A39%2C8

[devwilliamy]

Hi @luwes , thank you for responding.

So if I upload an asset on Mux, how should I handle it? Would I still have that same video in my /videos folder and do a next-video sy c with it?

I took the next-video-mux and tried running it locally. The video played on 17 but not on 16. This is what happened:

CodeSandBox.next-video-mux.mov

I also did another test that I did from a Next 14 Create App where I just added next-video and it didn't work on Safari 16.

Edited.Mux.Provider.Get.Started.mov

However, the Vercel Blob sandbox you sent me in another thread did work on both 16/17.

https://codesandbox.io/p/devbox/next-video-vercel-blob-w6wwqw?file=%2Fapp%2Fpage.js

Would this be a problem between Next 13 and 14?

Also, I'm new to CodeSandbox, is there a way to upload a zip of my code? Or do I have to recreate my code manually?

[devwilliamy]

After playing around some more so far this is what I've found:

Next Video w/ Vercel Blob works on both Safari 16/17
Next Video w/ Mux works only on Safari 17

[luwes]

this seems related to the iOS simulator
#168

[devwilliamy]

Hi @luwes it's related but I think these are two different problems

This one, on iOS 16.4 iPhone 14 the video would not play.
The other one would say Media error failed to decode for both iOS 16 and iOS 17