video.js

video.js是一個(gè)通用的在網(wǎng)頁上嵌入視頻播放器的JS庫灰伟，video.js自動(dòng)檢測(cè)瀏覽器對(duì)HTML5的支持情況店量，如果不支持HTML5則自動(dòng)使用Flash播放器云头。

文檔：

https://github.com/videojs/video.js

videojs中文文檔詳解_謝澤的網(wǎng)絡(luò)日志-CSDN博客_video.js

安裝：

$ npm install --save video.js videojs-contrib-hls

使用：

1. 基礎(chǔ)使用

// VideoComponentA.vue
<template>
  // id：用于獲取video對(duì)象
  // class：video-js vjs-default-skin為video內(nèi)置的樣式名稱唐断，樣式可根據(jù)具體項(xiàng)目進(jìn)行調(diào)整
  // autoplay：自動(dòng)播放
  // muted：設(shè)置靜音捞魁。在最新版的Chrome瀏覽器（以及所有以Chromium為內(nèi)核的瀏覽器）中赠群，已不再允許自動(dòng)播放音頻和視頻，設(shè)置靜音是一種hack手段浑吟，參考：https://www.mzwu.com/article.asp?id=4411
  // preload：提前加載
  <video id="my-video" class="video-js vjs-default-skin" autoplay muted preload="auto">
    // src：視頻流地址
    // type：視頻類型
    <source src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8" type="application/x-mpegURL" style='width: 100%;height: 100%'>
  </video>
</template>

<script lang="ts">
// 引入videojs以及樣式文件
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import { defineComponent, onMounted } from "vue"

setup() {
    // 在onMounted階段進(jìn)行初始化
    onMounted(() => {
      initVideoSourc()
    })

    function initVideoSourc() {
      videojs('my-video', {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        controlBar: true,
        // ...其他配置參數(shù)
      }, function () {
        this.play()
      })
    }
}
</script>

2. 多視頻笙纤、監(jiān)聽視頻地址變化綜合使用

// VideoComponentB.vue
<template>
  <video v-if="src" :id="videoId" class="video-js vjs-default-skin my-video" autoplay muted preload="auto" style='width: 100%;height: 100%'>
    <source :src="src" type="application/x-mpegURL" style='width: 100%;height: 100%'>
  </video>
</template>

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

export default defineComponent({
  name: 'VideoItem',

  props: {
    // 視頻地址
    src: {
      type: String,
      required: true
    },
    // 視頻列表中每個(gè)視頻的索引值
    index: {
      type: Number,
      default: 0
    },
  },

  setup(props) {
    // 監(jiān)聽視頻地址變化
    watch(
      () => props.src,
      (n) => {
        changeVideoSource(n)
      }
    )

    // 在onMounted階段進(jìn)行初始化
    onMounted(() => {
      initVideo()
    })
    
    // 在onBeforeUnmount階段釋放資源
    onBeforeUnmount(() => {
      disposeVideo()
    })
    
    // 用于多視頻列表區(qū)分每個(gè)視頻的id
    const videoId = computed(() => {
      return 'my-video' + props.index
    })
    // 初始化視頻
    function initVideo() {
      if (!props.src) return

      videojs(videoId.value, {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        controlBar: false
      }, () => {
        const myPlayer = videojs(videoId.value)
        myPlayer.play()
        myPlayer.on('error', () => {
          ...
        })
      })
    }
    // 視頻地址發(fā)生變化時(shí)的處理
    function changeVideoSource(src) {
      if (!src) return

      const myPlayer = videojs(videoId.value)
      myPlayer.src([
        {
          type: "application/x-mpegURL",
          src: src
        }
      ])
      myPlayer.play()
    }
    function disposeVideo() {
      const myPlayer = videojs(videoId.value)
      myPlayer.dispose()
    }

    return {
      videoId,
    }
  }
})
</script>

vue3-video-play

vue3版本的視頻播放插件，但github上反饋移動(dòng)端支持性不是很好组力，作者也沒有反饋省容，所以只作為備用方案。

文檔：

https://github.com/xdlumia/vue3-video-play

使用：

vue3播放器插件（vue3-video-play）,支持m3u8(hls)視頻 - 知乎

vue3中播放視頻和m3u8后綴的視頻解決辦法_一個(gè)超愛喝可樂的web前端攻城獅-CSDN博客

MuiPlayer

沒用過燎字，作為備用方案腥椒。

文檔：

https://muiplayer.js.org/zh/demo/

安裝：

插件下載 | MuiPlayer

總結(jié)

項(xiàng)目使用的各個(gè)包及其版本號(hào)：

// package.json
"dependencies": {
  "video.js": "^7.17.0",
  "videojs-contrib-hls": "^5.15.0",
  "vue": "^3.2.25",
  …
}