vue项目实现m3u8流媒体播放详细图文教程

npm install vue3-video-play --save

yarn add vue3-video-play --save

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css

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