VUE视频流应用
天行无忌 人气:0前言
前面在文章《创建 Node.js 视频流应用之后端》展示了构建一个用于在线流媒体视频传输后端服务。本文将继续使用 Vue.js 构建前端部分。进入主题之前先简单了解一下依赖库 vue-core-video-player。
vue-core-video-player 是 Vue.js 的轻量级视频播放器,容易上手。可以用少量的代码来创建强大的视频播放器,并且它对服务器端渲染很友好,这样就可以很容易地显示后端的视频源。
进入项目文件夹 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
更多配置可以参阅官方文档。
总结
加载全部内容