vue3使用video.js播放m3u8格式视频的完整代码
作者：yzhSWJ
M3U8是一种基于HTTP Live Streaming (HLS)的视频格式,它支持视频的分段传输,非常适合用于网络直播和点播服务,这篇文章主要介绍了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
封装一个视频播放组件
<template>
<div v-bind="$attrs" class="videoPlayer">
<video
class="video-js"
:id="id"
style="width: 100%; height: 100%"
:poster="poster"
>
<source v-if="src" :src="src" />
</video>
</div>
</template>
<script setup lang="ts">
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.html
function 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: any
onMounted(() => {
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()
}
})
</script>
<style scoped>
.videoPlayer {
width: 100%;
max-width: 800px;
height: 450px;
position: relative;
overflow: hidden;
}
.video-js {
padding-top: 0 !important;
}
</style>
使用组件
<!-- 视频弹窗 -->
<n-modal v-model:show="showVideoModal" :style="{ width: '800px' }">
<div class="video-container" style="padding: 0;">
<VideoPlayer
:src="currentVideoSrc"
id="videoPlayer"
:poster="jboltai"
/>
</div>
</n-modal>import jboltai from '@/assets/jboltai.png';
import VideoPlayer from "./VideoPlayer.vue"
const currentVideoSrc = ref('');
currentVideoSrc.value = "地址";
总结
到此这篇关于vue3使用video.js播放m3u8格式视频的文章就介绍到这了,更多相关vue3播放m3u8格式视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！