vue怎么实现播放监控视频流,vue如何制作视频
本文主要介绍如何使用VUE创建视频流应用程序的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
前言插件配置control工具播放视频播放控制摘要
前言
前一篇文章《创建 Node.js 视频流应用之后端》展示了如何为在线流式视频传输构建后端服务。本文将继续使用Vue.js构建前端部分。在进入正题之前，我们先简单看一下依赖库vue-core-video-player。
E-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文件夹并安装依赖项：
纱线添加vue-核心-视频-播放器-保存
编辑项目目录中的src/main.js文件，并导入依赖库：
从“vue-core-video-player”导入VueCoreVideoPlayer
Vue.use(VueCoreVideoPlayer，{
郎： zh-CN ，
});
接下来，使用以下代码编辑文件src/App.vue:
模板
div id=应用程序
div class=玩家容器
核心视频播放器
src= http://127 . 0 . 0 . 1:8100/video/20220315
/vue-core-视频播放器
/div
/div
/模板
运行命令启动yarn serve，效果如下：
插件配置
先来看看外挂vue-core-video-player的基本配置：
src
它可以是字符串，也可以是数组；如果是字符串，就是URL要播放的视频源的名称；如果是数组，格式如下：
const videoSource=[
{
src: 3358127 . 0 . 0 . 1:8100/video/20220315 ，
分辨率：“360p”，
},
{
src: 3358127 . 0 . 0 . 1:8100/video/20220315 ，
分辨率：“720像素”，
},
{
src: 3358127 . 0 . 0 . 1:8100/video/20220315 ，
分辨率：“1080p”，
},
];
如果是数组，可以设置视频播放的分辨率。在它上面使用相同的视频源。在实际项目中，可以根据情况为不同的分辨率设置相应的视频源。每个视频源可以采用不同的格式，这是根据类型设置的，如下所示：
const videoSource=[
{
src: 3358127 . 0 . 0 . 1:8100/video/20220315 ，
类型：视频/mp4 ，
分辨率：“360p”，
},
{
src: 3358127 . 0 . 0 . 1:8100/video/20220315 ，
分辨率：“720像素”，
类型：“视频/网络视频”，
},
];
controls
Controls用于设置播放器的底部控制面板，可以是以下值：
String:fixed表示底部控制面板将始终固定显示；意思是在用户没有产生任何交互操作后，auto底部的控制面板会自动消失。默认情况下，使用此表单。Boolean:false表示底部控制面板从不显示；True表示播放器将显示底部控制面板，效果与上面的auto值相同。
autoplay
如果设置了自动播放，播放器会自动播放视频，不同的浏览器处理自动播放的策略也不同。如果播放器失败，会显示播放按钮供用户操作。
视频播放控制
该插件保留了HTML视频的相同属性。
音量：视频音量(0-1)封面：会显示视频的封面；如果播放器设置为自动播放成功，cover属性将不起作用。Logo:会显示玩家logo。更多配置请参考官方文档。
源代码：github.com/QuintionTan…
总结
这就是这篇关于如何用VUE创建视频流应用程序的文章。更多相关的VUE视频流应用，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。