recherche

Maison  >  Article  >  interface Web  >  Comment utiliser Vue combiné avec Video.js pour lire des vidéos m3u8

Comment utiliser Vue combiné avec Video.js pour lire des vidéos m3u8

php中世界最好的语言
php中世界最好的语言original
2018-06-01 11:18:465389parcourir

Cette fois, je vais vous montrer comment utiliser Vue combinée avec Video.js pour lire des vidéos m3u8. Quelles sont les précautions concernant l'utilisation de Vue combinée avec Video.js pour lire des vidéos m3u8. cas pratique. Jetons un coup d'oeil.

Tout d'abord, nous devons installer les dépendances liées à video.js dans le projet vue. 

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

Ensuite, nous devons introduire le fichier css de videojs, par exemple, dans main.js 

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

Ensuite, nous introduisons l'objet js

sur la page où la vidéo doit être lue. 
import videojs from 'video.js'
import 'videojs-contrib-hls'

Spécifiez un conteneur vidéo, par exemple : 

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

Enfin, nous initialisons le lecteur dans le nœud monté : 

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

Vidéo m3u8 dans Video.js Changement de clarté

Code de test complet 

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser JS+CSS3 pour réaliser un zoom avant et arrière d'une image en réponse au mouvement de la souris

Comment utiliser le code Yuansheng JS pour implémenter le champ de recherche Baidu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser la barre d'onglets vue mint-ui (avec code)Article suivant：Comment utiliser la barre d'onglets vue mint-ui (avec code)

Articles Liés

Voir plus