Vue项目使用Video.js播放m3u8格式音（视）频流

记录工作中遇到的问题

需求：点击播放按钮显示弹层，在弹层上播放m3u8格式的音频流 

效果如下：

点击父组件的播放按钮

弹层显示出来，播放音频流（背景图片是我自己加的）

使用步骤： 

1.安装video.js和videojs-contrib-hls

npm i video.js
npm i videojs-contrib-hls

2.组件中引入

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

3.准备一个video容器

4.初始化video.js（此处可以进行播放器的配置网上有很多）

methods:{
// 初始化videojsgetVideo () {this.myVideo = videojs('my-video',{// autoplay: false, // 自动播放// loop: true, // 循环播放controls: true, // 控制元件width: 500, // 视频播放器显示的宽度height: 300, // 视频播放器显示的高度preload: 'none',bigPlayButton: true,posterImage: false,textTrackDisplay: false,errorDisplay: false,controlBar: true,sources: [{src: this.audioSrc,type: 'application/x-mpegURL'}]},function () {this.play()})}
}// 一进来就调用方法初始化video.js
mounted() {this.getVideo()
}

我的代码 ：

1.子组件（弹层）代码

2.父组件代码

播放

methods: {// 播放play () {// 打开弹层this.show = true// 准备video容器this.$refs.myBox.innerHTML = ''// 点击时调用子组件内的方法，初始化video.jsthis.$refs.audio.getVideo()// 调用方法获取流地址this.$refs.audio.getUrl()}
}

我遇到的报错：Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)

在我们正常使用的时候都是完全可以使用的，但是当我们有的时候需要把视频放在弹窗el-dialog里面显示时，可能会出现这个报错问题。

原因：刚进来时页面未找到相应组件，此时调用初始化video.js的方法就报错

解决：使用setTimeout延迟加载。如下：

let _that = this;
setTimeout(() => {_that.getVideo();
}, 300);

但是在使用他的方法后我的问题并没有解决。

然后我就自己找了个简单的弹层，将弹层的显示隐藏改为v-show，然后在父组件播放按钮的点击事件里调用子组件的初始化video.js的方法 getVideo()。

 参考文章：范特西是只猫https://blog.csdn.net/qq_36410795/article/details/107109514

lucky-peachhttps://blog.csdn.net/little__SuperMan/article/details/89203270

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！