1.背景

由于項(xiàng)目中視頻文件數(shù)量多，使用原始的mp4格式耗費(fèi)資源，所以采用媒體轉(zhuǎn)換技術(shù)來(lái)查看媒體資源，普通的video播放并不適用m3u8以及其他格式的流媒體，本文實(shí)現(xiàn)如何在vue項(xiàng)目中實(shí)現(xiàn)播放流媒體的技術(shù)。

2.插件

原本是想采用Hls.js第三方庫(kù)來(lái)手動(dòng)寫一下代碼，但是查到了使用Hls.js封裝的更好看的第三方插件vue3-video-play，我直接就是拿來(lái)主義！！

vue3-video-play官網(wǎng)：Vue3-video-play | Vue3VideoPlay

3. 安裝

npm安裝：

npm install vue3-video-play --save

yarn安裝：

yarn add vue3-video-play --save

這個(gè)插件本身的包，存在一些引入問(wèn)題，所以在頁(yè)面中會(huì)直接報(bào)錯(cuò)，我們需要在node_modules包下面找到vue3-video-play這個(gè)文件夾，點(diǎn)擊package.json文件，將module引入的文件修改為index.mjs，不明白的話直接查看上一層dist文件夾就知道為何要改了。

4. 在vue組件中使用

因?yàn)槲抑挥袀€(gè)別組件使用，所以按需引入

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

主要核心代碼就是這些，因?yàn)槲业膙ue組件代碼過(guò)多所以提供主要代碼，大致邏輯是這些 ：

• 監(jiān)聽(tīng)器 (watch):

  • watch 是 Vue 的響應(yīng)式系統(tǒng)的一部分，用于監(jiān)控一個(gè)或多個(gè)響應(yīng)式數(shù)據(jù)的變化。
  • 在這里，它監(jiān)聽(tīng)的是 showModal，即一個(gè)響應(yīng)式引用或狀態(tài)變量。

• 條件判斷 (newVal && videoUrl.value):

  • 只有當(dāng) showModal 為 true 且 videoUrl 有值時(shí)，才會(huì)執(zhí)行下面的邏輯。這意味著，只有當(dāng)模態(tài)框顯示并且有視頻 URL 的時(shí)候，才會(huì)去處理視頻播放。

• 判斷視頻類型 (videoUrl.value.endsWith('.m3u8')):

  • endsWith('.m3u8') 檢查 videoUrl 的值是否以 .m3u8 結(jié)尾。這通常用于判斷視頻文件格式是否是 HLS（HTTP Live Streaming），一種流媒體協(xié)議。
  • 如果是 .m3u8，設(shè)置 isM3u8 為 true，并配置 options 對(duì)象以支持 HLS 播放。
  • HLS 需要特殊的播放器支持，因此我們?cè)O(shè)置 options.src 和 options.type 為 'm3u8'。

• 處理非 .m3u8 視頻:

  • 如果不是 .m3u8，意味著視頻是普通格式（如 .mp4）。
  • 將 isM3u8 設(shè)置為 false。
  • 使用 nextTick 保證 DOM 更新完成后執(zhí)行以下操作：
    • 設(shè)置視頻元素的高度為 100%。
    • 更新視頻元素的 src 屬性以指向視頻 URL。
    • 添加事件監(jiān)聽(tīng)器 loadedmetadata：
    • 事件觸發(fā)后自動(dòng)調(diào)用 videoRef.value.play() 播放視頻。

 <n-modal v-model:show="showModal" title="視頻預(yù)覽" positive-text="確認(rèn)" @positive-click="showModal = false">
      <div class="w-[600px] rounded-md">
        <vue3videoPlay
          v-if="isM3u8"
          width="600px"
          title="視頻預(yù)覽"
          :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()
        })
      })
    }
  }
})

總結(jié) 

到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)m3u8流媒體播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論