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>
 <source>
</source></video>

最後に、マウントされたノードでプレーヤーを初期化します:

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

m3u8 video.js のビデオ解像度切り替え

テストコードを完成させます

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 中国語 Web サイト関連の記事に注目してください。

推奨読書:

JS+CSS3 を使用してマウスの動きのズームインおよびズームアウトに対する画像の応答性を実装する方法

Yuansheng JS コードを使用して Baidu 検索ボックスを実装する方法

以上がVue と Video.js を組み合わせて使用​​して m3u8 ビデオを再生する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。