监控设备播放效果如下
1、vue项目安装vue-video-player
npm install vue-video-player --save
2、编写视频播放组件（放上完整的组件例子，父组件调用时给videosrc和playeroptions.sources[0].src赋值就可以播放了，具体操作有注释）
注：style样式部分用了lang=scss，如果自己的项目没用他请用自己的方式改一下样式部分避免报错
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<template> <div class="video-js"> <div v-if="videosrc===''" class="no-video"> 暂未播放视频 </div> <video-player v-else class="video-player vjs-custom-skin" ref="videoplayer" :playsinline="true" :options="playeroptions"> </video-player> </div></template> <script>import videojs from 'video.js'import 'video.js/dist/video-js.css'import 'vue-video-player/src/custom-theme.css'import {videoplayer} from 'vue-video-player'import 'videojs-flash'import swf_url from 'videojs-swf/dist/video-js.swf' videojs.options.flash.swf = swf_url // 设置flash路径，video.js会在不支持html5的浏览中使用flash播放视频文件export default { name: 'videojs', components: { videoplayer }, data () { return { videosrc: '', playeroptions: { live: true, autoplay: true, // 如果true，浏览器准备好时开始播放 muted: false, // 默认情况下将会消除任何音频 loop: false, // 是否视频一结束就重新开始 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） aspectratio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） fluid: true, // 当true时，video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 controlbar: { timedivider: false, durationdisplay: false, remainingtimedisplay: false, currenttimedisplay: false, // 当前时间 volumecontrol: false, // 声音控制键 playtoggle: false, // 暂停和播放键 progresscontrol: false, // 进度条 fullscreentoggle: true // 全屏按钮 }, techorder: ['flash'], // 兼容顺序 flash: { hls: { withcredentials: false }, swf: swf_url }, sources: [{ type: 'rtmp/flv', src: '' // 视频地址-改变它的值播放的视频会改变 }], notsupportedmessage: '此视频暂无法播放，请稍后再试' // 允许覆盖video.js无法播放媒体源时显示的默认信息。 } } }}</script> <style scoped lang="less"> .video-js{ width:100%; height:100%; .no-video{ display:flex; height:100%; font-size:14px; text-align:center; justify-content: center; align-items:center; } }</style> |
3、父组件调用视频播放组件，点击“播放视频”替换组件里的视频流地址播放实时视频
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<template> <div class="about"> <video-player ref="playerobj"></video-player> <a @click="playvideo">播放视频</a> </div></template><script> import videoplayer from './../../components/videoplayer' export default { name: 'about', components: { videoplayer }, data() { return {} }, methods: { playvideo() { this.$refs['playerobj'].videosrc = 'rtmp://xxxxxxxx' this.$refs['playerobj'].playeroptions.sources[0].src = 'rtmp://xxxxxxxx' } } }</script> |
4、vue.config.js文件如下：需要加入的是chainwebpack配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
// vue.config.jsconst 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') ] } }} |
目前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
|
1
2
3
4
5
6
7
8
|
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中引入：<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>
路径中的js为上面输出的js地址
第四步：
引入使用组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<template> <div class="video"> <el-button type="primary" size="mini" @click="getdevicechanledata" icon="el-icon-search">选择通道</el-button> <el-button type="primary" size="mini" @click="dostart" icon="el-icon-search">开始直播</el-button> <live-player :videourl="videourl" fluent autoplay live stretch></live-player> </div></template><script>import liveplayer from '@liveqing/liveplayer'import { getdevicelist, getdevicechanlelist, start} from './apis/index.js'export default { data() { return { id: '', videourl: '' } }, components: { liveplayer }, created() { this.getdevicedata() }, methods: { // 获取设备数据列表 getdevicedata() { const para = { start: 1, limit: 10, online: true, q: '' } var par = { params: para } getdevicelist(par).then(res => { console.log('设备数据', res) this.id = res.devicelist[0].id }) }, // 查询设备通道列表 getdevicechanledata() { const para = { serial: this.id } var par = { params: para } getdevicechanlelist(par).then(res => { console.log('设备通道数据', res) }) }, // 开始直播 dostart() { const para = { serial: this.id } var par = { params: para } start(par).then(res => { console.log('开始直播', res) this.videourl = res.rtmp // this.videourl = res.hls // this.videourl = res.flv }) } }}</script><style scoped>.video{ position: relative; width:500px; height:300px;}img{ width:100%; height:100%;}.time1{ position: absolute; top:13px; right:150px;}</style> |
效果图：
以上这篇vue-video-player实现实时视频播放方式(监控设备-rtmp流)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/liona_koukou/article/details/84025449
