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()
})
})
}
}
})