如何利用VUE创建视频流应用

目录

• 前言
• 插件配置
• src
• controls
• autoplay
• 视频播放控制
• 总结

前言

前面在文章《创建 Node.js 视频流应用之后端》展示了构建一个用于在线流媒体视频传输后端服务。本文将继续使用 Vue.js 构建前端部分。进入主题之前先简单了解一下依赖库 vue-core-video-player。

vue-core-video-player 是 Vue.js 的轻量级视频播放器，容易上手。可以用少量的代码来创建强大的视频播放器，并且它对服务器端渲染很友好，这样就可以很容易地显示后端的视频源。

源码地址：github.com/QuintionTan…

进入项目文件夹 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

更多配置可以参阅官方文档。

源码地址：github.com/QuintionTan…

总结

到此这篇关于如何利用VUE创建视频流应用的文章就介绍到这了,更多相关VUE视频流应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！