在vue3中使用videojs播放 .m3u8格式文件

最近项目中有做视频播放，但是由于视频量大，所以后端处理用的是把视频切片放在m3u8里给前端，然后前端自己播放。
什么是M3U8文件呢？M3U8文件是指UTF-8编码格式的M3U文件。M3U8文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
播放之前可以自己用ffmpeg处理视频为m3u8，也可以找后端要现成的。用ffmpeg处理视频为m3u8可以参考这篇文章：ffmpeg在windows的安装、合并、切片、.m4s、.m3u8处理

VLC media player这个播放器也可以直接播放M3U8文件。
但是普通的video标签是不支持.m3u8格式文件直接播放的，网上查了一下，就用了videojs： videojs官网
使用方法：（因为我是在vue3中用的，所以引入js文件那些就不说了）
npm install video.js --save // 视频播放器插件
网上也有好多说videojs-contrib-hls，但是我没用这个也正常播放了，所以就没加，需要的童鞋也可以自己加上：
npm install videojs-contrib-hls --save // 播放hls流插件
别忘了在main.ts中引入videojs样式文件：
import 'video.js/dist/video-js.css' //videojs样式
复制代码
在要使用videojs的组件中引入videojs：

import videojs from 'video.js'
    // 如果安装了videojs-contrib-hls也记得引入
1
2

复制代码
如果确定安装成功之后引入videojs还是报错找不到模块，可以在 最外层（package.json同级）加一个shims-vue.d.ts文件，文件内容：

// declare声明宣告， 声明一个ambient module(即:没有内部实现的 module声明) 
declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
  }
   
declare module 'video.js';

  // xx即你包不能找到声明的包名
1
2
3
4
5
6
7
8
9

html代码:

<div id="videoDiv" class="video-container">
<video autoplay controls src=""></video>  // 这个video加班不加都行，但是不加的话在m3u8播放之前，这里是空的，所以我加了个video占位
</div>
1
2
3

js代码:

const n = ref(0);  // 因为我这里有很多url也切换，如果用固定的一个id后面会有报错，如果你只有一个视频，这里可以不用n，后面video的id里也不用n来拼
      const getVideo = (url?: string) => {
    const div: any = document.getElementById('videoDiv');
    div.innerHTML = '';
    div.innerHTML = `" class="video-js" style="width: 50vw; height: 32vw;">`;
    const options = {
      autoplay: true, // 设置自动播放
      controls: true, // 显示播放的控件
      // errorDisplay: false,
      muted: true,
      sources: [
        // 如果需要切换视频源，src需要动态设置
        {
          src: url,
          type: 'application/x-mpegURL', // 告诉videojs,这是一个m3u8流
        },
      ],
    };
    // videojs的第一个参数表示的是，文档中video的id
    videojs(`videoPlayer-${n.value}`, options, function onPlayerReady() {});
    n.value += 1;

     onMounted(() => {
      getVideo(url);  // 这里的参数url为一个变量或者固定值，因为我项目中不是在onMounted执行这个方法，是点击列表才播放的，所以这里用的是变量，这里可以自己根据实际需要修改
     })
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

希望本文对您有所帮助！