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