vue3使用video.js播放m3u8格式视频

为什么要将.mp4变成.m3u8

简单来说，将.mp4格式的视频转换为.m3u8格式主要有以下三个原因：

1. **视频切片**：.m3u8文件是HLS（HTTP Live Streaming）协议的播放列表文件，它将视频分割成多个小的TS片段。这种切片方式使得视频可以边下载边播放，提高了播放效率，尤其适用于网络流媒体传输。

2. **防盗保护**：通过将视频文件分割成多个片段，并结合加密技术，可以更好地保护视频内容，防止视频被盗用或非法传播。

3. **更流畅的播放体验**：HLS协议可以根据网络状况动态调整视频质量，切换不同码率的视频流，从而保证播放的流畅性，减少卡顿现象。

此外，.m3u8格式在各种播放器和设备上具有良好的兼容性，尤其是在苹果设备上，HLS是推荐的流媒体格式。同时，它还支持多语言音轨和多字幕轨的切换，提供更灵活的内容呈现方式。

videojs官网：videojs.com/guides/

videojs 中文文档：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html

安装依赖

npm i video.js

npm i videojs-contrib-hls

封装一个视频播放组件

 

 使用组件

 

import jboltai from '@/assets/jboltai.png';
import VideoPlayer from "./VideoPlayer.vue"

const currentVideoSrc = ref('');

currentVideoSrc.value = "地址";