Vue+Video.js播放m3u8影片步驟詳解

這次帶給大家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容器，例如：

<video>
 <source>
</source></video>

最後，我們在mounted節點初始化播放器：

videojs('my-video', {
 bigPlayButton: false,
 textTrackDisplay: false,
 posterImage: true,
 errorDisplay: false,
 controlBar: true
}, function () {
 this.play()
})

Video.js中m3u8影片清晰度切換

#完成測試程式碼 

nbsp;HTML> 
 
 
 <meta> 
 <title>视频控制</title> 
 <link> 
 <script></script> 
 <script></script> 
 <script></script> 
  
 
 <video> 
 <source> 
 </source></video> 
<br>  
  
<script>  
 window.onload=function(){   
 var videoPanelMenu = $(".vjs-fullscreen-control"); 
  videoPanelMenu.before(&#39;<p 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">&#39; 
  + &#39;<p class="vjs-menu" role="presentation">&#39; 
  + &#39;<ul class="vjs-menu-content" role="menu">&#39; 
  + &#39;<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)">普通&#39; 
  + &#39;<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)">标清 &#39; 
  + &#39;<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(3)">高清 &#39; 
  + &#39;&#39; 
  +&#39; <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">&#39; 
  +&#39;  <span aria-hidden="true" class="vjs-icon-placeholder"><span class="vjs-control-text">清晰度切换&#39; 
  +&#39; &#39; 
  +&#39;&#39; 
  ); 
   
 var obj={tag:false,ctime:0}; 
 window.obj=obj; 
 var myPlayer=videojs.getPlayers()[&#39;my_video_1&#39;]; 
  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> 

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue mint-ui tabbar元件使用步驟詳解

JS做出雜湊表功能

以上是Vue+Video.js播放m3u8影片步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！