这次给大家带来怎样使用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中文网其它相关文章！

推荐阅读：