vue3使用video.js播放m3u8格式视频_vue播放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 { onMounted, onBeforeUnmount, watch, ref } from \'vue\'import \'video.js/dist/video-js.css\'import videojs from \'video.js\'const overrideNative = ref(false)const props = defineProps({ id: { type: String, default: \'vd\' }, src: { type: String, default: \'\' }, poster: { type: String, default: \'\' }})const emit = defineEmits([ \'videoCanplaythrough\', \'videoPlay\', \'videoPlaying\', \'videoPause\'])// VideoJs更多选项配置可以参考中文文档：// https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.htmlfunction options() { return { html5: { hls: { overrideNative: overrideNative }, nativeVideoTracks: !overrideNative, nativeAudioTracks: !overrideNative, nativeTextTracks: !overrideNative }, autoplay: true, // true,浏览器准备好时开始播放。 muted: false, // 默认情况下将会消除音频。 loop: false, // 导致视频一结束就重新开始。 controls: true, preload: \'auto\', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） fluid: true, // 当true时，将按比例缩放以适应其容器。 type: \'application/x-mpegURl\', notSupportedMessage: \'此视频暂无法播放，请稍后再试\', // 无法播放媒体源时显示的默认信息。 textTrackDisplay: false }}let player: anyonMounted(() => { try { player = videojs(props.id, options(), () => { videojs.log(\'播放器已经准备好了!\') player.pause() player.on(\'canplaythrough\', function (event: any) { emit(\'videoCanplaythrough\', event.target.player.cache_?.duration) }) player.on(\'play\', function () { videojs.log(\'视频准备播放\') emit(\'videoPlay\') }) player.on(\'playing\', function () { videojs.log(\'视频已开始播放\') emit(\'videoPlaying\') }) player.on(\'pause\', function (event: any) { emit(\'videoPause\', event.target.player.cache_?.currentTime) }) }) } catch (error) { console.log(\'catch--->\', error) }})onBeforeUnmount(() => { if (player) { player.dispose() }}).videoPlayer { width: 100%; max-width: 800px; height: 450px; position: relative; overflow: hidden;}.video-js { padding-top: 0 !important;}

 使用组件

import jboltai from \'@/assets/jboltai.png\';import VideoPlayer from \"./VideoPlayer.vue\"const currentVideoSrc = ref(\'\');currentVideoSrc.value = \"地址\";