Open renlimina opened 3 months ago
welcome[bot]
commented
3 months ago 👋 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
commented
3 months ago 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
commented
3 months ago 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
commented
3 months ago 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
commented
3 months ago 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：
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