最近项目业务需要用到视频流直播。格式M3U8。在此记录一下
项目vue版本是2.5.16,先安装必须的插件
1.安装
yarn add video.js
yarn add videojs-contrib-hls // 这是播放hls流需要的插件
yarn add mux.js // 在vue中若不安装它可能报错
"video.js": "^7.11.8",
"videojs-contrib-hls": "^5.15.0",
"mux.js": "^5.11.0",
2.配置videojs到全局,便于引用和管理
- 新建 plugins文件夹,新建video.js文件;
video.js里内容
import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);
- 在main.js中引入video.js
import "./plugins/video.js";
3.使用
- 实现基本的播放
<video id="videoPlayer" class="video-js" muted></video>
......
import Videojs from "video.js";
.....
data() {
return {
playUrl:'http://xxx/xx/xxxx@34020000001320001102.m3u8',//测试地址
}
}
......
mounted(){
this.getVideo(this.playUrl);
},
getVideo(url) {
let options = {
autoplay: false, // 设置自动播放
controls: true, // 显示播放的控件
sources: [ //如果需要切换视频源,src需要动态设置
{
src: url,
type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
}
]
};
// videojs的第一个参数表示的是,文档中video的id
const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
});
},
4.运行测试
yarn dev
TypeError: The element or ID supplied is not valid. (videojs)
原因:页面未找到相应组件。这是由于本项目中视频是弹出框的形式,之前是隐藏状态,没有找到id为videoPlayer的组件
加nextTick解决
this.videoVisible = true;//显示弹框
this.$nextTick(()=>{
this.getVideo(this.playUrl);
})
测试成功
新增flv格式兼容
亲测
安装插件 yarn add videojs-flvjs-es6
video.js文件加上 import “videojs-flvjs-es6”
写了一个切换flv和hls的方法
if(type == 0){
this.player.src([
{
src: this.playUrl[0],
type: "video/x-flv"
}
]);
}else{
this.player.src([
{
src: this.playUrl[1],
type: "application/x-mpegURL"
}
]);
}
完成