前言

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

vue-core-video-player 是 Vue.js 的輕量級視頻播放器，容易上手?？梢杂蒙倭康拇a來創(chuàng)建強大的視頻播放器，并且它對服務(wù)器端渲染很友好，這樣就可以很容易地顯示后端的視頻源。

源碼地址：github.com/QuintionTan…

進入項目文件夾 vue-video-stream ，執(zhí)行命令 vue create video-web 創(chuàng)建前端項目選擇 vue2 。如果沒有安裝 vue ，可以執(zhí)行下面命令 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

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

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",
  },
];

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

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 用于設(shè)置播放器底部控制面板，可以是如下值：

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

autoplay

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

視頻播放控制

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

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

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

源碼地址：github.com/QuintionTan…

總結(jié)

到此這篇關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的文章就介紹到這了,更多相關(guān)VUE視頻流應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！