So verwenden Sie Vue in Kombination mit Video.js, um m3u8-Videos abzuspielen-js-Tutorial-php.cn

So verwenden Sie Vue in Kombination mit Video.js, um m3u8-Videos abzuspielen

php中世界最好的语言

Freigeben： 2018-06-01 11:18:46

Original

5362 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Vue in Kombination mit Video.js zum Abspielen von m3u8-Videos verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue in Kombination mit Video.js zum Abspielen von m3u8-Videos? Werfen wir einen Blick darauf.

Zuerst müssen wir video.js-bezogene Abhängigkeiten im Vue-Projekt installieren.

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

Nach dem Login kopieren

Dann müssen wir die CSS-Datei von videojs einführen, zum Beispiel

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

Nach dem Login kopieren

in main.js einführen. Dann führen wir das js-Objekt

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

Nach dem Login kopieren

ein Geben Sie einen Videocontainer an, zum Beispiel:

<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>

Nach dem Login kopieren

Zuletzt initialisieren wir den Player im gemounteten Knoten:

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

Nach dem Login kopieren

m3u8-Videodefinitionsumschaltung in Video.js

Vervollständigen Sie den Testcode

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere verwandte Informationen Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit JS+CSS3 das Vergrößern und Verkleinern von Bildern als Reaktion auf Mausbewegungen realisiert

So verwenden Sie Yuansheng JS-Code zur Implementierung des Baidu-Suchfelds

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue in Kombination mit Video.js, um m3u8-Videos abzuspielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!