Example of a method of playing m3u8 video stream in combination with Vue

First of all, we need to install relevant dependencies in the vue project.

npm install --save 
npm install --save videojs-contrib-hls

Then we need to introduce videojs' css file, for example, in

import '/dist/'

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

import videojs from ''
import 'videojs-contrib-hls'

Specify a video container, for example:

<video  class="video-js vjs-default-skin" controls preload="auto" poster="../assets/">
 <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL">
</video>

Finally, we initialize the player on the mounted node:

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

Switching of the m3u8 video definition

Complete the test code

&lt;!DOCTYPE HTML&gt; 
&lt;html&gt; 
&lt;head&gt; 
 &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; 
 &lt;title&gt;Video control&lt;/title&gt; 
 &lt;link href="//dist/" rel="external nofollow" rel="stylesheet"&gt; 
 &lt;script src="/ajax/libs/jquery/1.2.6/" type="text/javascript"&gt;&lt;/script&gt; 
 &lt;script src="//dist/"&gt;&lt;/script&gt; 
 &lt;script src="/videojs-contrib-hls/dist/"&gt;&lt;/script&gt; 
&lt;/head&gt;  
&lt;body&gt; 
 &lt;video  class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"  
 data-setup='{}'&gt; 
 &lt;source src="http://localhost/video/c/1928.m3u8" type="application/x-mpegURL"&gt; 
 &lt;/video&gt; 
&lt;br/&gt;  
&lt;/body&gt;  
&lt;script type="text/javascript"&gt;  
 =function(){   
 var videoPanelMenu = $(".vjs-fullscreen-control"); 
  ('&lt;div 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"&gt;' 
  + '&lt;div class="vjs-menu" role="presentation"&gt;' 
  + '&lt;ul class="vjs-menu-content" role="menu"&gt;' 
  + '&lt;li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)"&gt;ordinary&lt;/li&gt;' 
  + '&lt;li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)"&gt;Standard Definition &lt;/li&gt;' 
  + '&lt;li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(3)"&gt;HD &lt;/li&gt;' 
  + '&lt;/ul&gt;&lt;/div&gt;' 
  +' &lt;button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="Sharpness Switch" aria-disabled="false"&gt;' 
  +'  &lt;span aria-hidden="true" class="vjs-icon-placeholder"&gt;&lt;/span&gt;&lt;span class="vjs-control-text"&gt;Switching of clarity&lt;/span&gt;' 
  +' &lt;/button&gt;' 
  +'&lt;/div&gt;' 
  ); 
   
 var obj={tag:false,ctime:0}; 
 =obj; 
 var myPlayer=()['my_video_1']; 
  ("timeupdate", function(){ 
    if(){ 
   videojs("my_video_1").currentTime() 
   videojs("my_video_1").play(); 
   =false; 
  } 
   
  //Play video  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(); 
  } 
  =ctime; 
  =true; 
 } 
 &lt;/script&gt; 
&lt;/html&gt;

The above is the simplest implementation as shown in the question. For more needs, please read the relevant APIs yourself or continue to pay attention to it. I also hope everyone supports me.