這篇文章主要給大家介紹了關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

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

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

源碼地址：github.com/QuintionTan…

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

初始化 VUE 項(xiàng)目后，進(jìn)入文件夾 video-web ，安裝依賴：

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

編輯項(xiàng)目目錄下的文件 src/main.js ，導(dǎo)入依賴庫(kù)：

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

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

接下來(lái)編輯文件 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>

運(yùn)行命令啟動(dòng) yarn serve ，效果如下：

插件配置

下面來(lái)看下插件 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è)置視頻播放的分辨率，上面使用的是同一個(gè)視頻源，在實(shí)際項(xiàng)目中可以根據(jù)情況為不同分辨率設(shè)置相應(yīng)的視頻源。每個(gè)視頻源可以是不同的格式，通過(guò) type 來(lái)設(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 表示底部控制面板會(huì)一直固定顯示；auto 表示底部控制面板在用戶未產(chǎn)生任何交互操作后自動(dòng)消失，默認(rèn)以這種形式。
Boolean：false 表示始終不顯示底部控制面板；true 表示播放器將顯示底部控制面板并和上面的 auto 值一樣的效果。