公司要做一个摄像头的实时预览，然后视频格式是rtmp格式的直播流，查了一下相关资料，这种格式的视频流目前只有flash播放器可以播放，videoJs继承了视频流的处理，果断开工，一路走来一路坑，完工记录一下。
首先，videoJs6x以上版本好像淘汰flash了，各种报错，换成5x版本就可以了。第一步，安装依赖包。
npm install video.js@5.6.0 -S核心组件代码如下：
<template>
<div class="video">
<video :id="videoId"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="auto"
autoplay
controls
style="width: 100%;height: 100%;"
data-setup='{"html5" : { "nativeTextTracks" : false }}'>
<source :src="videoSrc" type="rtmp/flv">
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
videojs.options.flash.swf = SWF_URL
export default {
name:'QnvideoPlayer',
props:{
videoId:{
type:String,
default:'hot',
},
videoSrc:{
type:String,
default:'rtmp://202.69.69.180:443/webcast/bshdlive-pc'
},
videoShow:{
type:Boolean,
default:true,
}
},
data(){
return {
videoPlayer: undefined,
}
},
created(){
},
mounted(){
this.$nextTick(()=>{
if(this.videoShow){
this.selectVideo();
}
})
},
destroyed(){
console.log('销毁-----------------')
this.disposeVideo();
},
methods: {
selectVideo() {
this.videoPlayer = videojs(this.videoId);// 关联video标签的id
console.log(this.videoPlayer)
this.videoPlayer.src({
src: this.videoSrc,
type: 'rtmp/flv'
});
this.videoPlayer.play();
this.videoPlayer.pause();
},
disposeVideo(){
if(this.videoPlayer){
this.videoPlayer.dispose()
}
}
},
components:{ },
watch:{
videoShow(n){
if(n){
this.selectVideo();
}else{
this.disposeVideo();
}
},
videoSrc(){
this.selectVideo();
}
}
}
</script>
<style lang="less" scoped>
.video{
width: 300px;
height: 400px;
}
</style>
调试过程中有两个问题比较棘手：
1. No compatible source was found for this media.
将如图的flash改成默认允许就可以了
2. ./node_modules/videojs-swf/dist/video-js.swf 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file
这个是因为webpack识别不了.swf格式的文件，在vue.config.js里面配置一下就可以了,代码如下：
configureWebpack:(config)=>{
config.module.rules.push({
test: /\.(swf|ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
loader: 'file-loader',
})
},最后附上用于测试的播放rtmp直播流地址：
rtmp://202.69.69.180:443/webcast/bshdlive-pc
rtmp://58.200.131.2:1935/livetv/hunantv
git地址：https://github.com/aicai0/test_components.git
如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏
及时获取更多姿势，请您关注！！！
