怎样使用Vue结合Video.js播放m3u8视频-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

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

Jun 01, 2018 am 11:18 AM

javascript bermain

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

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

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

Salin selepas log masuk

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

import 'video.js/dist/video-js.css'

Salin selepas log masuk

接着，我们在需要播放视频的页面引入js对象

import videojs from 'video.js'
import 'videojs-contrib-hls'

Salin selepas log masuk

指定一个video容器，例如：

&lt;video id=&quot;my-video&quot; class=&quot;video-js vjs-default-skin&quot; controls preload=&quot;auto&quot; poster=&quot;../assets/video.png&quot;&gt;
 &lt;source src=&quot;http://127.0.0.1:7086/aaa/213/stream/1.m3u8&quot; type=&quot;application/x-mpegURL&quot;&gt;
&lt;/video&gt;

Salin selepas log masuk

最后，我们在mounted节点初始化播放器：

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

Salin selepas log masuk

Video.js中m3u8视频清晰度切换

完成测试代码

&lt;!DOCTYPE HTML&gt; 
&lt;html&gt; 
&lt;head&gt; 
 &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
 &lt;title&gt;视频控制&lt;/title&gt; 
 &lt;link href=&quot;https://unpkg.com/video.js/dist/video-js.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot;&gt; 
 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
 &lt;script src=&quot;https://unpkg.com/video.js/dist/video.js&quot;&gt;&lt;/script&gt; 
 &lt;script src=&quot;https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js&quot;&gt;&lt;/script&gt; 
&lt;/head&gt;  
&lt;body&gt; 
 &lt;video id=&quot;my_video_1&quot; class=&quot;video-js vjs-default-skin&quot; controls preload=&quot;auto&quot; width=&quot;640&quot; height=&quot;268&quot;  
 data-setup=&#39;{}&#39;&gt; 
 &lt;source src=&quot;http://localhost/video/c/1928.m3u8&quot; type=&quot;application/x-mpegURL&quot;&gt; 
 &lt;/video&gt; 
&lt;br/&gt;  
&lt;/body&gt;  
&lt;script type=&quot;text/javascript&quot;&gt;  
 window.onload=function(){   
 var videoPanelMenu = $(".vjs-fullscreen-control"); 
  videoPanelMenu.before('&lt;p class=&quot;vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button&quot; aria-live=&quot;polite&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot;&gt;' 
  + '&lt;p class=&quot;vjs-menu&quot; role=&quot;presentation&quot;&gt;' 
  + '&lt;ul class=&quot;vjs-menu-content&quot; role=&quot;menu&quot;&gt;' 
  + '&lt;li class=&quot;vjs-menu-item&quot; tabindex=&quot;-1&quot; role=&quot;menuitemcheckbox&quot; onclick=&quot;changeVideo(1)&quot;&gt;普通&lt;/li&gt;' 
  + '&lt;li class=&quot;vjs-menu-item&quot; tabindex=&quot;-1&quot; role=&quot;menuitemcheckbox&quot; onclick=&quot;changeVideo(2)&quot;&gt;标清 &lt;/li&gt;' 
  + '&lt;li class=&quot;vjs-menu-item&quot; tabindex=&quot;-1&quot; role=&quot;menuitemcheckbox&quot; onclick=&quot;changeVideo(3)&quot;&gt;高清 &lt;/li&gt;' 
  + '&lt;/ul&gt;&lt;/p&gt;' 
  +' &lt;button class=&quot;vjs-subs-caps-button vjs-control vjs-button&quot; type=&quot;button&quot; aria-live=&quot;polite&quot; title=&quot;清晰度切换&quot; aria-disabled=&quot;false&quot;&gt;' 
  +'  &lt;span aria-hidden=&quot;true&quot; class=&quot;vjs-icon-placeholder&quot;&gt;&lt;/span&gt;&lt;span class=&quot;vjs-control-text&quot;&gt;清晰度切换&lt;/span&gt;' 
  +' &lt;/button&gt;' 
  +'&lt;/p&gt;' 
  ); 
   
 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; 
 } 
 &lt;/script&gt; 
&lt;/html&gt;

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！