Vue结合Video.js播放m3u8视频流的方法示例

2019-11-19 13:55:22

字体：大中小

来源：转载

供稿：网友

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

npm install --save video.jsnpm 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或者持续关注。也希望大家多多支持武林网。

上一篇：vue mint-ui tabbar变组件使用

下一篇：原生javascript AJAX 三级联动的实现代码