Safari: media playback does not start when using overrideNative + experimentalUseMMS #1600
Description
Hello there!
Description
I encountered a similar issue to this one however I have not faced the MEDIA_ERR_SRC_NOT_SUPPORTED error
I noticed that when using Safari with the flags overrideNative and experimentalUseMMS set to true, video playback does not start.
html5: {
vhs: {
overrideNative: true,
experimentalUseMMS: true
}
I traced the issue back to the following commit:
c1d3186
Prior to this change everything works as expected.
Test case
This sample reproduces the issue when tested in Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example: overrideNative error on Safari</title>
<!-- Local Video.js assets -->
<!-- <link href="../video.js/dist/video-js.css" rel="stylesheet" type="text/css" />
<script src="../video.js/dist/video.js"></script> -->
<script src="https://vjs.zencdn.net/8.23.4/video.js"></script>
<link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Example: overrideNative error on Safari</h1>
<video
id="player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
autoplay
muted
width="640"
height="360"
data-setup="{}"
>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>.
</p>
</video>
<script>
const player = videojs('player', {
html5: {
vhs: {
overrideNative: true,
experimentalUseMMS: true
},
}
});
player.src({
src: 'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8',
type: 'application/x-mpegURL'
});
player.ready(function () {
console.log('Video.js player ready');
});
</script>
</body>
</html>Possible fix
After reviewing the code further, I noticed that playback breaks when the following line was introduced:
this.segmentMetadataTrack_.mode = 'hidden';Which was introduced in the mentioned commit
Changing the file playlist-controller.js with this
// Only disable segment metadata track in Safari/iOS when using overrideNative HLS
// (same scenario where we add both blob and manifest source elements for AirPlay)
if ((videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS) &&
options.overrideNative &&
options.experimentalUseMMS &&
this.sourceType_ === 'hls') {
this.segmentMetadataTrack_.mode = 'disabled';
} else {
this.segmentMetadataTrack_.mode = 'hidden';
}This change appears to fix the issue.
I will open a PR with the proposed fix so it can be reviewed.
What version of Video.js are you using?
8.23.4
Video.js plugins used
No response
What browser(s) including version(s) does this occur with?
Safari 26.3
What OS(es) and version(s) does this occur with?
MacOS Tahoe 26.3