Error Playing m3u8 video，1. VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) video append of 96872b failed for segment #0 in playlist 3 ；2. VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

[renlimina]

Description

Error Playing the m3u8 format video ,Playback background back to m3u8 format video error on iPhone and some phones, but Google Chrome works fine

Reduced test case

no

Steps to reproduce

1.vue2
2.
3.

Errors

Intercepted XHR response from https://xxxx.aliyuncs.com/video/202406/556601fd-18b6-4c63-a4bb-525d7d7b82cb_640x360_0000.ts?Expires=1719907523&OSSAccessKeyId=LTAI5tQdi1xH8grkd5a5eMkg&Signature=HOgMf5t%2BjzqogTEpy1s2IkynVHQ%3D

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) video append of 96872b failed for segment #0 in playlist 3``

What version of Video.js are you using?

8.12.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Google Chrome is good

What OS(es) and version(s) does this occur with?

iphone

[welcome]

👋 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.

[renlimina]

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) video append of 96872b failed for segment #0 in playlist 3-
VIDEOJS: ERROR: ReferenceError: videojs is not defined

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

[renlimina]

Partial code:
`
// div class="video-wrap" ref="videoWrapHls"> div

mounted() {
this.loadedVideoElement();
}

methods: {

		loadedVideoElement(e) {
			if (document.getElementById('myVideo')) {
				this.$refs.videoWrapHls.$el.removeChild(document.getElementById('myVideo'))
			}
			if (this.playerVideo) {
				this.playerVideo.dispose();
			}
			var video = document.createElement('video');
			video.id = 'myVideo';
			video.style = `width:calc(100vw - var(--window-left) - var(--window-right));min-height:211px;height:100%`;
			video.setAttribute(
				'class',
				'video-js vjs-default-skin vjs-big-play-centered'
			);
			video.setAttribute('webkit-playsinline', true);
			video.setAttribute('playsinline', true);
			video.setAttribute('x5-video-player-type', 'h5');
			video.setAttribute('x5-video-player-fullscreen', true);
			video.setAttribute('x-webkit-airplay', true);
			this.$refs.videoWrapHls.$el.appendChild(video);
			let _this = this;
			this.playerVideo = Videojs('myVideo', {
					poster: this.courseInfo.courseCover,
					controls: true,
					autoplay: false,
					preload: 'auto', //不可修改，有的m3u8需要提前加载，有的不需要
					'show-play-btn': true,
					// fluid: true, // 自适应宽高
					playbackRates: this.courseInfo.isSpeed == 'Y' ? [0.8, 1, 1.25, 1.5] : [], //倍速
					sources: [{
						 src: newSrc,
						 currentSrc: newSrc,
						type: this.nowCharpterSource.src.includes('m3u8') ? "application/x-mpegURL" : "video/mp4",
					}],
					controlBar: { // 设置控制条组件
						progressControl: true, // 进度条
						currentTimeDisplay: true, // 当前时间
						timeDivider: true, // 时间分割线
						durationDisplay: true, // 总时间
						remainingTimeDisplay: false, //倒计时总时间
						customControlSpacer: false, //画中画
						fullscreenToggle: true, // 全屏按钮
						volumePanel: false,
						children: [
							"playToggle", // 播放/暂停按钮
							"progressControl", // 播放进度条
							"volumeMenuButton",
							"currentTimeDisplay", // 视频当前已播放时间
							"timeDivider",
							"durationDisplay", // 视频播放总时间
							"remainingTimeDisplay",
							"fullscreenToggle",
							"playbackRateMenuButton", // 倍速播放
						], //用于控制video控制条顺序
					},
					// loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
					// autoDisable: true,
					// language: 'zh-CN',
					// fluid: true, // 自适应宽高
					// muted: false, //  是否静音
					// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					techOrder: ["html5"],
					html5: {
						hls: {
							withCredentials: true
						}
					}
				},
				function onPlayerReady(e) {
					this.on('loadedmetadata', function() {
						let detail = {
							duration: _this.playerVideo.duration(),
							currentTime: _this.playerVideo.currentTime()
						}
						_this.loadedMount({
							detail
						});
						// videojs.log('播放准备完成了!');
					});
					this.on('firstplay', function(e) {
						// videojs.log('首次加载...!',e);
						_this.updateVideoTimer();
					});
					this.on('timeupdate', function(e) {
						// videojs.log('更新更新了!');
						_this.timecontrol();
					});
					this.on('play', function(e) {
						_this.updateLearnTime(0);
						// videojs.log('播放开始了!',e);
					});
					this.on('pause', function(e) {
						_this.updateLearnTime(2);
				
						// videojs.log('播放暂停了!',e);
					});
					this.on('ended', function(e) {
						_this.stopInterval();
						_this.updateLearnTime(1);
						// videojs.log('播放结束了!');
					});
					this.on('seeking', function(e) {
						// videojs.log('跳转中...!');
					});
					this.on('seeked', function(e) {
						// videojs.log('跳转后...!');
					});
					this.on('enterFullWindow', function(e) {
						// videojs.log('使用全屏...!');
					});
					this.on('exitFullWindow', function(e) {
						// videojs.log('退出全屏...!');
					});

					this.on('error', function(e) {
						videojs.log('播放出错了!', e);
						if (e.type == "error") {
							
					
							return;
						}
					});
					// 监听全屏
					this.on('fullscreenchange', function(e) {
						
				
						if (_this.playerVideo.isFullscreen()) {
							_this.isFullScreen = true
						
						} else {
							console.log('播放器退出全屏模式');
						}
					});
					console.log("初始化完成")
				});
			this.playerVideo.hlsQualitySelector();
		},

}
`

[mister-ben]

This does not make sense. iPhone does not support MSE, so these errors could not occur. The console screenshots look like Chrome, which you say "works fine".

[renlimina]

This is displayed by connecting the phone to the computer through the microsoft edge plug-in, which is itself opened through the phone's own browser, and the phone model is Meizu。

Please take a look at the screenshot below:

This is an Apple phone, “WeChat Work”（or “WeCom”） report error

This is an error reported by Meizu mobile browser：