Vue项目 播放m3u8格式视频

1.安装依赖

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

2.在main.js引入全局样式和js文件，或者在需要使用的单页面按需引入

import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'

3.页面里面使用

注意：一定要加 class=“video-js vjs-default-skin”，要不然样式会非常难看

<video id="singleVideo" preload="none" class="video-js vjs-default-skin" ></video>

	//使用
          let singlePlayer = videojs("singleVideo", {
    
    
            autoplay: true,//自动播放
            controls: true,//控件显示
            width: "440",//视频框宽度
            height: "264",//视频框高度
          });
          let res ="http://61.175.121.73:83/pag/10.13.7.2/7302/33052182001320012936/0/MAIN/TCP/live.m3u8";
          if (res) {
    
    
            singlePlayer.src({
    
     src: res, type: "application/x-mpegURL" });
            singlePlayer.play();
          }

效果：