Next Video Media Error Media failed to decode on iOS Simulator

[devwilliamy]

I'm on Next 14.0.1 and Next Video 0.12.0.

When I try to press play, it gives me this error message on the screen: Media Error, Media failed to decode

My code works fine on Chrome, Chrome mobile, Safari, an actual phone Safari, but it's not working on the simulator Safari.
I'm using simulators iPhone 15 Pro iOS 17.2 and iPhone 14 iOS 16.4.
My actual phone is iPhone 11 16.2

The weird thing is, even if I go to an older deployment that I know worked before, it will still give me the decode error.

Here are some error logs in the console:

Unhandled Promise Rejection: InvalidStateError: Failed to start the audio device

[Error] [mux-player 2.2.0]
MediaError: Media failed to decode
l — 3449.b36d2974e3487adf.js:1:406
(anonymous function) — 3449.b36d2974e3487adf.js:1:17458
eI — 3449.b36d2974e3487adf.js:1:17638
	(anonymous function) (8069-8e208e7468aa6535.js:1:3799)
	cD (3449.b36d2974e3487adf.js:1:230350)
	(anonymous function) (3449.b36d2974e3487adf.js:1:317625)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:318441)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:190100)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:17600)

[Error] [mux-player 2.2.0] – "MediaError data:" – {response: {code: 200}}
	(anonymous function) (8069-8e208e7468aa6535.js:1:3799)
	cD (3449.b36d2974e3487adf.js:1:230350)
	(anonymous function) (3449.b36d2974e3487adf.js:1:317639)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:318441)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:190100)
	dispatchEvent
	(anonymous function) (3449.b36d2974e3487adf.js:1:17600)

In my network tab I have seen the .mp4 content I'm trying to load get a status: 206 though but i notice it happening on the devices that work too so I don't think the 206 is the issue.

Let me know if you need anymore information.

My Next Video is used like this:

 <Video
      src={src}
      muted
      autoPlay={autoplay}
      loop={loop}
      style={{
        aspectRatio: 1 / 1,
        height: '100%',
        '--seek-backward-button': 'none',
        '--seek-forward-button': 'none',
      }}
    >
      {imgSrc ? (
        <Image
          alt="Video Thumbnail"
          slot="poster"
          src={imgSrc}
          aria-hidden="true"
        />
      ) : null}
    </Video>

My next config:

const { withNextVideo } = require('next-video/process');
/** @type {import('next').NextConfig} */
const nextConfig = { }
module.exports = withNextVideo(nextConfig, { provider: 'vercel-blob' });

[Wesley Luyten]

thanks for reporting this, moving to a discussion because it's not something we can fix in this library I believe but good to be on people's radar!