Home > Article > Web Front-end > How to use Vue combined with Video.js to play m3u8 videos

How to use Vue combined with Video.js to play m3u8 videos

php中世界最好的语言Original: 2018-06-01 11:18:465343browse

This time I will show you how to use Vue combined with Video.js to play m3u8 videos, and what are the precautions for using Vue combined with Video.js to play m3u8 videos. The following is a practical case. Let’s take a look. .

First, we need to install video.js related dependencies in the vue project.

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

Then, we need to introduce the css file of videojs, for example, in main.js

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

Then, we introduce the js object on the page where the video needs to be played

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

Specify a video container, for example:

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

Finally, we initialize the player in the mounted node:

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

m3u8 video definition switching in Video.js

Complete the test code

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use Vue combined with Video.js to play m3u8 videos

Related articles