Vue と Video.js を組み合わせて使用して m3u8 ビデオを再生する方法-jsチュートリアル-php.cn

Vue と Video.js を組み合わせて使用して m3u8 ビデオを再生する方法

php中世界最好的语言

リリース： 2018-06-01 11:18:46

オリジナル

5396 人が閲覧しました

今回は、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 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>

ログイン後にコピー

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

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

ログイン後にコピー

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

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

<!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=&#39;{}&#39;> 
 <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('<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">' 
  + '<p 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></p>' 
  +' <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>' 
  +'</p>' 
  ); 
   
 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>

ログイン後にコピー

を読んだ後、メソッドをマスターしたと思います。この記事の場合、よりエキサイティングな内容については、他の php 中国語 Web サイト関連の記事に注目してください。

推奨読書:

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

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

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