怎样使用Vue结合Video.js播放m3u8视频

PHP中文网 • 2025年3月8日 06:17:05 • 编程技术 • 阅读 2

这次给大家带来怎样使用Vue结合Video.js播放m3u8视频，使用Vue结合Video.js播放m3u8视频的注意事项有哪些，下面就是实战案例，一起来看一下。

首先，我们需要在vue工程中安装video.js相关依赖。

npm install --save video.jsnpm install --save videojs-contrib-hls

登录后复制

然后，我们需要引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/https://cdn.chuangxiangniao.com/2025/03/20250309084520639.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视频清晰度切换

完成测试代码

      视频控制              
       window.onload=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;  }