这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下。
首先,我们需要在vue工程中安装video.js相关依赖。npm install --save video.js
npm install --save videojs-contrib-hls
然后,我们需要引入videojs的css文件,例如在main.js中引入import 'video.js/dist/video-js.css'
接着,我们在需要播放视频的页面引入js对象import videojs from 'video.js'
import 'videojs-contrib-hls'
指定一个video容器,例如:
最后,我们在mounted节点初始化播放器:videojs('my-video', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
this.play()
})
Video.js中m3u8视频清晰度切换
完成测试代码
视频控制data-setup='{}'>
window.οnlοad=function(){
var videoPanelMenu = $(".vjs-fullscreen-control");
videoPanelMenu.before('
+ '
+ '
+ '
普通'+ '
标清 '+ '
高清 '+ '
'+' '
+' 清晰度切换'
+' '
+'
');
var obj={tag:false,ctime:0};
window.obj=obj;
var myPlayer=videojs.getPlayers()['my_video_1'];
myPlayer.on("timeupdate", function(){
if(window.obj.tag){
videojs("my_video_1").currentTime(window.obj.ctime)
videojs("my_video_1").play();
window.obj.tag=false;
}
//视频打点
var ctime_=videojs("my_video_1").currentTime().currentTime();
if(ctime_==60){
videojs("my_video_1").currentTime(ctime_+1);
//do something
}
});
}
function changeVideo(type){
var ctime=videojs("my_video_1").currentTime();
if(type==1){
videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/LD/1928.m3u8" }]);
videojs("my_video_1").play();
}
if(type==2){
videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/C/1928.m3u8" }]);
videojs("my_video_1").play();
}
if(type==3){
videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/HD/1928.m3u8" }]);
videojs("my_video_1").play();
}
window.obj.ctime=ctime;
window.obj.tag=true;
}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: