前面在文章《創建 Node.js 視頻流應用之后端》展示了構建一個用于在線流媒體視頻傳輸后端服務。本文將繼續使用 Vue.js 構建前端部分。進入主題之前先簡單了解一下依賴庫 vue-core-video-player。

vue-core-video-player 是 Vue.js 的輕量級視頻播放器，容易上手。可以用少量的代碼來創建強大的視頻播放器，并且它對服務器端渲染很友好，這樣就可以很容易地顯示后端的視頻源。

源碼地址：https://github.com/QuintionTang/vue-video-stream

進入項目文件夾 vue-video-stream ，執行命令 vue create video-web 創建前端項目選擇 vue2 。如果沒有安裝 vue ，可以執行下面命令 npm install -g @vue/cli 全局安裝。

初始化 VUE 項目后，進入文件夾 video-web ，安裝依賴：

yarn add vue-core-video-player --save

編輯項目目錄下的文件 src/main.js ，導入依賴庫：

import VueCoreVideoPlayer from "vue-core-video-player";

Vue.use(VueCoreVideoPlayer, {
    lang: "zh-CN",
});

接下來編輯文件 src/App.vue，代碼如下：

<template>
    <div id="app">
        <div class="player-container">
            <vue-core-video-player
                src="http://127.0.0.1:8100/video/20220315"
            ></vue-core-video-player>
        </div>
    </div>
</template>

運行命令啟動 yarn serve ，效果如下：

插件配置

下面來看下插件 vue-core-video-player 基本配置：

src

可以是字符串或者數組，如果是字符串就是播放的視頻源 URL；如果是數組，格式如下：

const videoSource = [
  {
      src: "http://127.0.0.1:8100/video/20220315",
      resolution: "360p",
  },
  {
      src: "http://127.0.0.1:8100/video/20220315",
      resolution: "720p",
  },
  {
      src: "http://127.0.0.1:8100/video/20220315",
      resolution: "1080p",
  },
];

如果是數組，可以設置視頻播放的分辨率，上面使用的是同一個視頻源，在實際項目中可以根據情況為不同分辨率設置相應的視頻源。每個視頻源可以是不同的格式，通過 type 來設置，如下：

const videoSource = [
  {
      src: "http://127.0.0.1:8100/video/20220315",
      type:"video/mp4",
      resolution: "360p",
  },
  {
      src: "http://127.0.0.1:8100/video/20220315",
      resolution: "720p",
      type:"video/webm",
  },
];

controls

controls 用于設置播放器底部控制面板，可以是如下值：

• String：fixed 表示底部控制面板會一直固定顯示；auto 表示底部控制面板在用戶未產生任何交互操作后自動消失，默認以這種形式。
• Boolean：false 表示始終不顯示底部控制面板；true 表示播放器將顯示底部控制面板并和上面的 auto 值一樣的效果。

autoplay

如果設置 autoplay，播放器將自動播放視頻，不同的瀏覽器有不同的策略來處理自動播放。如果播放器失敗，它將顯示播放按鈕供用戶操作。

視頻播放控制

插件保留了 HTML Video 的相同屬性。

• volume：視頻音量 (0-1)
• cover：它將顯示視頻的封面；如果設置了播放器自動播放成功，cover 屬性將不起作用。
• logo：它將顯示播放器logo

更多配置可以參閱官方文檔。

源碼地址：https://github.com/QuintionTang/vue-video-stream