这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
监控设备播放效果如下
1、vue项目安装vue-video-player
npm install vue-video-player –save
2、编写视频播放组件（放上完整的组件例子，父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了，具体操作有注释）
注：style样式部分用了lang=scss，如果自己的项目没用他请用自己的方式改一下样式部分避免报错
<div class="video-js"> <div class="no-video"> 暂未播放视频 </div> </div> .video-js{ width:100%; height:100%; .no-video{ display:flex; height:100%; font-size:14px; text-align:center; justify-content: center; align-items:center; } }
3、父组件调用视频播放组件，点击“播放视频”替换组件里的视频流地址播放实时视频
<div class="about"> 播放视频</div>
4、vue.config.js文件如下：需要加入的是chainwebpack配置
// vue.config.js const path = require('path') const webpack = require('webpack') module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/bcmp-web/' : '/', outputDir: process.env.NODE_ENV === 'production' ? 'bcmp-web' : 'dist', lintOnSave: true, productionSourceMap: false, devServer: { open: true, host: '0.0.0.0', port: 9005, https: false, hotOnly: false, proxy: null }, configureWebpack: { plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', 'windows.jQuery': 'jquery' }) ] }, chainWebpack: config => { config.module .rule('swf') .test(/\.swf$/) .use('url-loader') .loader('url-loader') .options({ limit: 10000 }) }, pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ path.resolve(__dirname, './src/assets/baseStyle/var.scss'), path.resolve(__dirname, './src/assets/baseStyle/mixin.scss<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码网@</strong>') ] } } }
目前vue-video-player版本5.0.2，测试可用
补充知识：vue项目接入视频监控系列——-播放器的选择
在智慧城市发展迅速的今天，视频监控接入web平台的需求似乎成了不可或缺和潮流。博主准备对自己开发视频监控项目的经历做个记录，整理成一个系列的文章。
在前端发展迅速的今天，h5的出现让在web平台实现无插件播放似乎成了可能，但是video对于RTMP或者RTSP协议的视频流却无能为力，在这里向大家推荐一个播放器： LivePlayer，这是一家视频公司封装的一个播放器，可以免费使用：说明文档
（获取的播放地址为后端配置服务后调用接口获取的）
使用：
第一步： 安装：
npm install @liveqing/liveplayer
npm i -D copy-webpack-plugin
第二步：引入：
在webpack.dev.conf.js中引入和声明插件：
const CopyWebpackPlugin = require(‘copy-webpack-plugin’)
在该文件夹下plugins中声明插件new CopyWebpackPlugin
plugins: [ new CopyWebpackPlugin([ { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'} ])]
第三步：
在index.html中引入：
路径中的js为上面输出的js地址
第四步：
引入使用组件：
<div class="video"> 选择通道开始直播</div> .video{ position: relative; width:500px; height:300px; } img{ width:100%; height:100%; } .time1{ position: absolute; top:13px; right:150px; }
效果图：
以上就是vue-video-player实现实时视频播放方式(监控设备-rtmp流)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue-video-player实现实时视频播放方式(监控设备-rtmp流)
