vue使用videojs播放mu38
引入videojs// 安装依赖npm install vue-video-player --savenpm install videojs-contrib-hls --saveimport videojs from "video.js";import "videojs-contrib-hls";//播放视频getVideo(url, index) {var video = document.ge
·
引入videojs
// 安装依赖
npm install vue-video-player --save
npm install videojs-contrib-hls --save
import videojs from "video.js";
import "videojs-contrib-hls";
//播放视频
getVideo(url, index) {
var video = document.getElementById(`video${index}`);
var that=this;
videojs(
video,
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
autoplay: true,
hls: {
withCredentials: true,
},
fullscreen: {
options: { navigationUI: "hide" },
},
sources: [
{
src: url,
},
],
},
function () {
this.play();
var seekingTimes = 0;
//直播卡顿加载loading时候触发seeking
this.on('seeking',function(){
//正在去拿视频流的路上
console.log('seeking', ++seekingTimes)
if(seekingTimes >= 8) {
that.$router.go(0)
}
})
//直播拿到视频流重新播放时出发seeked
this.on('seeked',function(){
seekingTimes = 0
//已经拿到视频流,可以播放
console.log('seeked')
})
this.on("error", function () {
console.log("加载错误");
that.$router.go(0)
});
this.on("stalled",function(){
console.log("网速异常");
setTimeout(() => {
that.$router.go(0)
}, 10000);
})
}
);
},
事件监听参考
var playerVideo = videojs("my-player", options, function onPlayerReady() {
videojs.log('Your player is ready!');
this.on("loadstart",function(){
console.log("开始请求数据 ");
})
this.on("progress",function(){
console.log("正在请求数据 ");
})
this.on("loadedmetadata",function(){
console.log("获取资源长度完成 ")
})
this.on("canplaythrough",function(){
console.log("视频源数据加载完成")
})
this.on("waiting", function(){
console.log("等待数据")
});
this.on("play", function(){
console.log("视频开始播放")
});
this.on("playing", function(){
console.log("视频播放中")
});
this.on("pause", function(){
console.log("视频暂停播放")
});
this.on("ended", function(){
console.log("视频播放结束");
});
this.on("error", function(){
console.log("加载错误")
});
this.on("seeking",function(){
console.log("视频跳转中");
})
this.on("seeked",function(){
console.log("视频跳转结束");
})
this.on("ratechange", function(){
console.log("播放速率改变")
});
this.on("timeupdate",function(){
console.log("播放时长改变");
})
this.on("volumechange",function(){
console.log("音量改变");
})
this.on("stalled",function(){
console.log("网速异常");
})
});
更多推荐
已为社区贡献2条内容
所有评论(0)