首先，我们需要在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容器，例如：
<video id=\"my-video\" class=\"video-js vjs-default-skin\" controls preload=\"auto\" poster=\"../assets/video.png\"> <source src=\"http://127.0.0.1:7086/aaa/213/stream/1.m3u8\" type=\"application/x-mpegURL\"> </video>
最后，我们在mounted节点初始化播放器：
videojs(\'my-video\', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
this.play()
})
Video.js中m3u8视频清晰度切换
完成测试代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />
<title>视频控制</title>
<link href=\"https://unpkg.com/video.js/dist/video-js.css\" rel=\"external nofollow\" rel=\"stylesheet\">
<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\" type=\"text/javascript\"></script>
<script src=\"https://unpkg.com/video.js/dist/video.js\"></script>
<script src=\"https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js\"></script>
</head>
<body>
<video id=\"my_video_1\" class=\"video-js vjs-default-skin\" controls preload=\"auto\" width=\"640\" height=\"268\"
data-setup=\'{}\'>
<source src=\"http://localhost/video/c/1928.m3u8\" type=\"application/x-mpegURL\">
</video>
<br/>
</body>
<script type=\"text/javascript\">
window.onload=function(){
var videoPanelMenu = $(\".vjs-fullscreen-control\");
videoPanelMenu.before(\'<div class=\"vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button\" aria-live=\"polite\" aria-expanded=\"false\" aria-haspopup=\"true\">\'
+ \'<div class=\"vjs-menu\" role=\"presentation\">\'
+ \'<ul class=\"vjs-menu-content\" role=\"menu\">\'
+ \'<li class=\"vjs-menu-item\" tabindex=\"-1\" role=\"menuitemcheckbox\" onclick=\"changeVideo(1)\">普通</li>\'
+ \'<li class=\"vjs-menu-item\" tabindex=\"-1\" role=\"menuitemcheckbox\" onclick=\"changeVideo(2)\">标清 </li>\'
+ \'<li class=\"vjs-menu-item\" tabindex=\"-1\" role=\"menuitemcheckbox\" onclick=\"changeVideo(3)\">高清 </li>\'
+ \'</ul></div>\'
+\' <button class=\"vjs-subs-caps-button vjs-control vjs-button\" type=\"button\" aria-live=\"polite\" title=\"清晰度切换\" aria-disabled=\"false\">\'
+\' <span aria-hidden=\"true\" class=\"vjs-icon-placeholder\"></span><span class=\"vjs-control-text\">清晰度切换</span>\'
+\' </button>\'
+\'</div>\'
);
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;
}
</script>
</html>
以上就是如题最简单的实现，更多需求请自行阅读video.js相关api或者持续关注。也希望大家多多支持。
© 版权声明
THE END
暂无评论内容