如何利用VUE创建视频流应用
前言
前面在文章《创建 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
更多配置可以参阅官方文档。
总结
到此这篇关于如何利用VUE创建视频流应用的文章就介绍到这了,更多相关VUE视频流应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
错误处理是框架设计的核心要素之一,框架的错误处理好坏,直接决定用户应用程序的健壮性以及用户开发应用时处理错误的心智负担,本文将从源码入手,剖析一下Vue3中是如何进行错误处理的,需要的可以参考下2024-01-01
这篇文章主要介绍 Vue3组件传参的方式,包括父子组件、跨层级组件、兄弟组件的传参,如父子组件通过属性绑定和自定义事件双向传参,跨层级组件可利用 Provide/Inject 机制和 Pinia 状态管理,兄弟组件可通过父组件中转或 mitt 库直接传参,需要的朋友可以参考下2025-01-01
刚刚创建好vue项目的时候,运行 npm run dev 会报错,下面这篇文章主要给大家介绍了关于运行npm run dev报错的原因及解决方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了安装Vue+webpack出现的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
使用element ui中el-table-column进行自定义校验
这篇文章主要介绍了使用element ui中el-table-column进行自定义校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue3 组件库的环境配置搭建过程,使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue的异步数据更新机制与$nextTick用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要给大家介绍了在vue中如何通过iframe方式加载本地的vue页面的解决方法，文中有详细的解决流程,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue中的eventBus会不会产生内存泄漏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
e中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
最新评论