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”>
  

  
  
  

  
  
  
  
  

  
  
  
  

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