Video.js: "ERROR:" – "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)" iOS iPhone

[tomasamado97]

Description

I'm trying to play a HLS video from an Authenticated url but it won't work.

Steps to reproduce

1.Use videojs.xhr to set Authorization token on the header before the video starts.
2.Try to play a video.

Results

Expected

Video should start after play button is pressed.

Actual

Player crashes and I get the error on the console.
(ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.)

Error output

"ERROR:" – "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

Additional Information

versions

videojs

what version of videojs does this occur with?
^7.8.4"

browsers

what browser are affected?
Safari, Chrome, Firefox

OSes

what platforms (operating systems and devices) are affected?
iOS iPhone Simulator 13.2.2 (MacOS Catalina 10.15.5 (19F101))

plugins

are any videojs plugins being used on the page? If so, please list them below.
None.

Extra Info:

This is the component that I made to play the video.
The url returns 200 with the correct response but after that the video player crashes.

Response:
`#EXTM3U

EXT-X-VERSION:3

EXT-X-INDEPENDENT-SEGMENTS

EXT-X-STREAM-INF:BANDWIDTH=784780,AVERAGE-BANDWIDTH=713144,CODECS="avc1.4d401f,mp4a.40.5",RESOLUTION=640x360,FRAME-RATE=29.970

01EFARQKM0JWM2PJFYE0RRGZGW/360

EXT-X-STREAM-INF:BANDWIDTH=3939486,AVERAGE-BANDWIDTH=3711592,CODECS="avc1.4d401f,mp4a.40.5",RESOLUTION=1280x720,FRAME-RATE=29.970

01EFARQKM0JWM2PJFYE0RRGZGW/720`

Component:

```import * as React from "react";
import { useState, useEffect, useRef } from "react";
import videojs from "video.js";
import Cookies from "js-cookie";
import styled from "@emotion/styled";

interface PlayerProps {
src: string;
type: string;
}

const StyledVidePlayer = styled.video width: 100%; height: 80%; padding-top: 90px; display: flex; align-items: center; ;
const Container = styled.div width: 100%; height: 100%; display: flex; align-items: center; padding: 20px; ;

export const VideoPlayer = ({
src = "",
type = "application/x-mpegurl",
}: PlayerProps) => {
const videoRef = useRef(null);
const [player, setPlayer] = useState(null);

useEffect(() => {
const options = {
fill: true,
fluid: true,
responsive: true,
preload: "auto",
controls: true,
playsinline: true,
type,
html5: {
hls: {
overrideNative: false,
withCredentials: true,
},
nativeAudioTracks: false,
nativeVideoTracks: false,
},
};
const vjsPlayer = videojs(videoRef.current, options);
setPlayer(vjsPlayer);
return () => vjsPlayer.dispose();
}, []);

useEffect(() => {
if (player !== null && !src.includes("null")) {
videojs.xhr(
{
url: src,
headers: {
Authorization: Bearer ${Cookies.get("token")},
},
},
(err, resp, body) => {
if (resp.statusCode === 200) {
console.log(body, err, resp);
player.src(body);
}
if (err) throw err;
}
);
}
}, [src, type, player]);

return (

{/* eslint-disable-next-line jsx-a11y/media-has-caption */}


);
};

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mr-sven]

Maybe Duplicate of #6758

[tomasamado97]

Yeah, I agree that is similar but not the same. I need to pass the token within the headers, so using the Cookies is not an option for me.
Without the cookies I can't use the fix that you proposed on #6758

[Theng]

@tomasamado97 Hello, if you have solution, please share it. I got this problem too.

[tomasamado97]

Haven't found one yet, I'd love if @heff or @gkatsev could give me a hand, that'd be awesome.

[gkatsev]

It is not possible to set headers for media requests when native playback is used. On iOS, it's not possible to use MSE playback and so native playback.
If you are trying to set the m3u8 as a string, you can do that by using a data-uri. It should work if the segment urls are not relative but absolute urls.

[tomasamado97]

Can you provide an example? It'd be awesome if you can. I'll keep trying and post the answer here if I get it to work. Thanks a lot for the quick answer @gkatsev 👍🏻

[tomasamado97]

UPDATE: I ended talking with the backend guys from my team. We changed how we required Authorization for the videos. The best way for this is just sending the Cookies. Quick reminder, for this you need to set the domain for the cookies.

Hope this helps anyone else that might be on the same issue.
If anyone needs some help doing this from the frontend side, hit me up.