如何利用VUE創(chuàng)建視頻流應(yīng)用

更新時間：2022年03月17日 15:52:21 作者：天行無忌

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

前言

前面在文章《創(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 ，導(dǎo)入依賴庫：

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