快捷導(dǎo)航

vue3使用video.js播放m3u8格式視頻的操作指南

更新時(shí)間：2024年07月08日 08:51:57 作者：抹茶san

有時(shí)候我們需要播放 m3u8 格式的視頻,或者實(shí)現(xiàn)視頻播放器更多定制化需求,HTML 的 video 元素?zé)o法實(shí)現(xiàn)這些需求,這時(shí)候可以考慮使用 Video.js,本文給大家介紹了vue3使用video.js播放m3u8格式視頻的操作指南,需要的朋友可以參考下

實(shí)現(xiàn)一個(gè)Videojs播放器組件

視頻封面圖片來(lái)自u(píng)nsplash

安裝依賴(lài)

npm i video.js

M3U8 是一種基于 HTTP Live Streaming (HLS) 技術(shù)的媒體播放列表格式，所以我們還需要安裝依賴(lài)。

npm i videojs-contrib-hls

播放器組件代碼

<template>
  <div v-bind="$attrs" class="videoPlayer">
    <video
      class="video-js"
      :id="id"
      style="width: 100%; height: 100%"
      :poster="poster"
    >
      <source v-if="src" :src="src" />
    </video>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch, ref } from 'vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

const overrideNative = ref(false)
const props = defineProps({
  id: { type: String, default: 'vd' },
  src: { type: String, default: '' },
  poster: { type: String, default: '' }
})

const emit = defineEmits([
  'videoCanplaythrough',
  'videoPlay',
  'videoPlaying',
  'videoPause'
])

// VideoJs更多選項(xiàng)配置可以參考中文文檔：
// https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
function options() {
  return {
    html5: {
      hls: {
        overrideNative: overrideNative
      },
      nativeVideoTracks: !overrideNative,
      nativeAudioTracks: !overrideNative,
      nativeTextTracks: !overrideNative
    },
    autoplay: true, // true,瀏覽器準(zhǔn)備好時(shí)開(kāi)始播放。
    muted: false, // 默認(rèn)情況下將會(huì)消除音頻。
    loop: false, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。
    controls: true,
    preload: 'auto', // auto瀏覽器選擇最佳行為,立即開(kāi)始加載視頻（如果瀏覽器支持）
    fluid: true, // 當(dāng)true時(shí)，將按比例縮放以適應(yīng)其容器。
    type: 'application/x-mpegURl',
    notSupportedMessage: '此視頻暫無(wú)法播放，請(qǐng)稍后再試', // 無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
    textTrackDisplay: false
  }
}

let player: any

onMounted(() => {
  try {
    player = videojs(props.id, options(), () => {
      videojs.log('播放器已經(jīng)準(zhǔn)備好了!')
      player.pause()
      player.on('canplaythrough', function (event: any) {
        emit('videoCanplaythrough', event.target.player.cache_?.duration)
      })
      player.on('play', function () {
        videojs.log('視頻準(zhǔn)備播放')
        emit('videoPlay')
      })
      player.on('playing', function () {
        videojs.log('視頻已開(kāi)始播放')
        emit('videoPlaying')
      })
      player.on('pause', function (event: any) {
        emit('videoPause', event.target.player.cache_?.currentTime)
      })
    })
  } catch (error) {
    console.log('catch--->', error)
  }
})

onBeforeUnmount(() => {
  if (player) {
    player.dispose()
  }
})
</script>

<style scoped>
.videoPlayer {
  width: 100%;
  max-width: 640px;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.video-js {
  padding-top: 0 !important;
}
</style>

組件使用

<template>
  <div>  
      <VideoPlayer
        :src="src"
        id="videoPlayer"
        :poster="require('~/assets/images/photo-1622208489373-1fe93e2c6720.avif')"
      />   
  </div>
</template>

<script setup>
import { ref } from 'vue'

const src = ref(
  'https://xxx.m3u8' 
)


</script>

設(shè)置語(yǔ)言為中文

基礎(chǔ)的播放器已經(jīng)寫(xiě)好了，但是現(xiàn)在播放器自帶的語(yǔ)言還是英文，我們需要設(shè)置為中文。 VideoJS自帶了很多語(yǔ)言包，按需設(shè)置即可。

import video_zhCN from 'video.js/dist/lang/zh-CN.json'
videojs.addLanguage('zh-CN', video_zhCN)

// ...
function options() {
  return {
    // ...
    language: 'zh-CN'
  }
}

OK，VideoJs 播放器的文字已經(jīng)變成中文了。

如何同時(shí)使用多個(gè)VideoJs播放器組件

如果我們直接復(fù)制一樣的組件代碼，發(fā)現(xiàn)只有第一個(gè)可以正常播放，第二個(gè)播放器不能使用

這個(gè)問(wèn)題也很好解決，上面的組件props提供了id屬性，我們只需給兩個(gè)組件設(shè)置不同的id即可

 <VideoPlayer
        :src="src"
        id="vd1"
        :poster="require('~/assets/images/photo-1622208489373-1fe93e2c6720.avif')"
      />

你可能還會(huì)遇到切換視頻沒(méi)有變化的的問(wèn)題，通過(guò)為每次播放的視頻設(shè)置獨(dú)一無(wú)二的id即可，類(lèi)似:id=uuid()

指定播放時(shí)間點(diǎn)

通過(guò)設(shè)置currentTime，可以讓視頻從某個(gè)時(shí)間點(diǎn)開(kāi)始播放

watch(
  () => props.currentTime,
  () => {
    player.currentTime(Number(props.currentTime))
  }
)

onMounted(() => {
  try {
    player = videojs(props.id, options(), () => {
      // ...
      player.on('timeupdate', function (event: any) {
        emit('videoTimeupdate', event.target.player.cache_?.currentTime)
      })
      // ...
    })
  }
})

以上就是vue3使用video.js播放m3u8格式視頻的操作指南的詳細(xì)內(nèi)容，更多關(guān)于vue3 video.js播放m3u8視頻的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: