首先,我们需要在vue工程中安装video.js相关依赖。
npm安装,节省video.js
npm安装,节省videojs-contrib-hls
然后,我们需要引入videojs的css文件,例如在main.js中引入
导入“video.js/dist/video-js.css”
接着,我们在需要播放视频的页面引入js对象
从“video.js”进口videojs
导入“videojs-contrib-hls”
指定一个视频容器,例如:
& lt;视频id=拔业氖悠怠眂lass=皏ideo-js vjs-default-skin”控制预加载=捌怠焙１?" . ./资产/video.png”比;
& lt;源src=" http://127.0.0.1:7086/aaa/213/流/1。m3u8“type="应用程序/x-mpegURL”比;
& lt;/video>
最后,我们在安装节点初始化播放器:
videojs(“我的视频”,{
bigPlayButton:假的,
textTrackDisplay:假的,
posterImage:没错,
errorDisplay:假的,
controlBar:真
},函数(){
this.play ()
}）
之前
<强>视频。js中m3u8视频清晰度切换
完成测试代码,
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>视频控制& lt;/title>
& lt;链接的href=" https://unpkg.com/video.js/dist/video-js.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt;脚本src=" http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本src=" https://unpkg.com/video.js/dist/video.js "祝辞& lt;/script>
& lt;脚本src=" https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;视频id=" my_video_1 " class=" video-js vjs-default-skin”控制预加载=白远笨矶?=?68”“640”高度
data-setup=皗}”比;
src=" http://localhost/video/c/1928 & lt;来源。m3u8“type="应用程序/x-mpegURL”比;
& lt;/video>
& lt; br/比;
& lt;/body>
& lt;脚本type=" text/javascript祝辞
window=function () {
var videoPanelMenu=$ (“.vjs-fullscreen-control”);
videoPanelMenu.before (' & lt; div class=" vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button”aria-live=袄衩病盿ria-expanded=癴alse”aria-haspopup=" true "祝辞的
+ ' & lt; div类==把菔尽北取皏js-menu”作用,”
+ ' & lt; ul类==安说ァ北取皏js-menu-content”作用,”
+ ' & lt;李类=" vjs-menu-item " tabindex=" 1 "的作用=癿enuitemcheckbox”在普通& lt;/li>”
+ ' & lt;李类=" vjs-menu-item " tabindex=" 1 "的作用=癿enuitemcheckbox”在标清& lt;/li>”
+ ' & lt;李类=" vjs-menu-item " tabindex=?”=癿enuitemcheckbox”作用在高清& lt;/li>”
+ ' & lt;/ul> & lt;/div>”
+ & lt;按钮类=眝js-subs-caps-button vjs-control vjs-button " type="按钮" aria-live="礼貌" title=扒逦惹谢弧癮ria-disabled=癴alse”在“
+ ' & lt;跨度aria-hidden=" true "类=皏js-icon-placeholder祝辞& lt;/span> & lt;跨类=皏js-control-text”在清晰度切换& lt;/span>”
+ & lt;/button>”
+ & lt;/div>”
);
var obj={标签:假的,ctime: 0};
window.obj=obj;
var myPlayer=videojs.getPlayers () (“my_video_1”);
myPlayer。(“timeupdate”功能(){
如果(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 ();
如果(ctime_==60) {
videojs (my_video_1) .currentTime (ctime_ + 1);//做某事
}
}）;
}
函数changeVideo(类型){
var ctime=videojs (my_video_1) .currentTime ();
如果(type==1) {
videojs (“my_video_1”)。src([{类型:“应用程序/x-mpegURL src:“http://localhost/video/LD/1928。m3u8 "});
videojs (my_video_1) .play ();
}
如果(type==2) {
videojs (“my_video_1”)。src([{类型:“应用程序/x-mpegURL src:“http://localhost/video/C/1928。m3u8 "});
videojs (my_video_1) .play ();
}
如果(类型==3){
videojs (“my_video_1”)。src([{类型:“应用程序/x-mpegURL src:“http://localhost/video/HD/1928。m3u8 "});
videojs (my_video_1) .play ();
}
window.obj.ctime=ctime;
window.obj.tag=true;
}
& lt;/script>
& lt;/html>
