video.js播放视频,如果中途改变了视频源,用src切换时会出现不生效的现象,解决办法是,回收video标签,重新建一个video实例即可。
initVideoPlayer(): void {
// 销毁旧的播放器实例
if (this.player) {
this.player.dispose();
this.player = null;
}
const videoContainer: any = document.getElementById('video-container');
// 移除旧的 <video> 标签
videoContainer.innerHTML = '';
// 创建新的 <video> 标签
const newVideoElement = document.createElement('video');
newVideoElement.id = 'my-video';
newVideoElement.className = 'video-js vjs-default-skin';
newVideoElement.setAttribute('controls', '');
newVideoElement.setAttribute('preload', 'auto');
newVideoElement.style.width = '100%';
newVideoElement.style.height = '72.5vh';
videoContainer.appendChild(newVideoElement);
//创建video节点
this.player = videojs('my-video', {
controlBar: {
children: {
// 添加自定义重播按钮
replayButton: {
name: 'ReplayButton',
},
},
// 确保所有按钮都被显示
playToggle: true, // 播放/暂停按钮
volumePanel: true, // 音量控制面板
currentTimeDisplay: true, // 当前时间显示
timeDivider: true, // 时间分隔符
durationDisplay: true, // 总时长显示
remainingTimeDisplay: true, // 剩余时间显示
progressControl: true, // 进度条控制
liveDisplay: true, // 直播显示
// playbackRateMenuButton: true, // 播放速率菜单按钮
// chaptersButton: true, // 章节按钮
// subtitlesButton: true, // 字幕按钮
// captionsButton: true, // 字幕按钮
// audioTrackButton: true, // 音频轨道按钮
fullscreenToggle: true, // 全屏切换按钮
},
techOrder: ['html5', 'flvjs'],
poster: 'assets/img/poster.png',
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
},
},
});
// this.player.on('error', (errType, errDetail) => {
// console.log('Player error>>>>>>>>>>>>>>>>>>>>>:', errType, errDetail);
// });
}