vue项目实现m3u8流媒体播放详细图文教程
作者：SimmerLee.
m3u8是一种常用的视频流媒体格式,通常用于在Web上播放视频,这篇文章主要给大家介绍了关于vue项目实现m3u8流媒体播放的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
1.背景
由于项目中视频文件数量多，使用原始的mp4格式耗费资源，所以采用媒体转换技术来查看媒体资源，普通的video播放并不适用m3u8以及其他格式的流媒体，本文实现如何在vue项目中实现播放流媒体的技术。
2.插件
原本是想采用Hls.js第三方库来手动写一下代码，但是查到了使用Hls.js封装的更好看的第三方插件vue3-video-play，我直接就是拿来主义！！
vue3-video-play官网：Vue3-video-play | Vue3VideoPlay
3. 安装
npm安装：
npm install vue3-video-play --save
yarn安装：
yarn add vue3-video-play --save
这个插件本身的包，存在一些引入问题，所以在页面中会直接报错，我们需要在node_modules包下面找到vue3-video-play这个文件夹，点击package.json文件，将module引入的文件修改为index.mjs，不明白的话直接查看上一层dist文件夹就知道为何要改了。
4. 在vue组件中使用
因为我只有个别组件使用，所以按需引入
import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css
主要核心代码就是这些，因为我的vue组件代码过多所以提供主要代码，大致逻辑是这些 ：
监听器 (
watch):watch是 Vue 的响应式系统的一部分，用于监控一个或多个响应式数据的变化。- 在这里，它监听的是
showModal，即一个响应式引用或状态变量。
条件判断 (
newVal && videoUrl.value):- 只有当
showModal为true且videoUrl有值时，才会执行下面的逻辑。这意味着，只有当模态框显示并且有视频 URL 的时候，才会去处理视频播放。
- 只有当
判断视频类型 (
videoUrl.value.endsWith('.m3u8')):endsWith('.m3u8')检查videoUrl的值是否以.m3u8结尾。这通常用于判断视频文件格式是否是 HLS（HTTP Live Streaming），一种流媒体协议。- 如果是
.m3u8，设置isM3u8为true，并配置options对象以支持 HLS 播放。 - HLS 需要特殊的播放器支持，因此我们设置
options.src和options.type为'm3u8'。
处理非
.m3u8视频:- 如果不是
.m3u8，意味着视频是普通格式（如.mp4）。 - 将
isM3u8设置为false。 - 使用
nextTick保证 DOM 更新完成后执行以下操作：- 设置视频元素的高度为 100%。
- 更新视频元素的
src属性以指向视频 URL。 - 添加事件监听器
loadedmetadata： - 事件触发后自动调用
videoRef.value.play()播放视频。
- 如果不是
<n-modal v-model:show="showModal" title="视频预览" positive-text="确认" @positive-click="showModal = false">
<div class="w-[600px] rounded-md">
<vue3videoPlay
v-if="isM3u8"
width="600px"
title="视频预览"
:src="options.src"
:type="options.type"
:auto-play="false"
/>
<div v-else class="h-[550px] object-fill">
<video ref="videoRef" class="w-full bg-black" controls autoplay>
<source src="" type="application/x-mpegURL">
</video>
</div>
</div>
</n-modal>
const videoUrl = ref(null)
const showModal = ref(false)
const videoRef = ref(null)
const isM3u8 = ref(false)
const options = reactive({
src: '', // 视频源
type: '', // 视频类型
})
watch(showModal, (newVal) => {
if (newVal && videoUrl.value) {
if (videoUrl.value.endsWith('.m3u8')) {
isM3u8.value = true
options.src = videoUrl.value
options.type = 'm3u8'
}
else {
isM3u8.value = false
nextTick(() => {
videoRef.value.style.height = '100%'
videoRef.value.src = videoUrl.value
videoRef.value.addEventListener('loadedmetadata', () => {
videoRef.value.play()
})
})
}
}
})总结
到此这篇关于vue项目实现m3u8流媒体播放的文章就介绍到这了,更多相关vue实现m3u8流媒体播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！