个人中心
gpt4 book ai didi

vue-video-player实现实时视频播放方式(监控设备-rtmp流)

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue-video-player实现实时视频播放方式(监控设备-rtmp流)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

监控设备播放效果如下 。

vue-video-player实现实时视频播放方式(监控设备-rtmp流)

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.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' )
    ]
   }
  }
}

目前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流)

以上这篇vue-video-player实现实时视频播放方式(监控设备-rtmp流)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/liona_koukou/article/details/84025449 。

最后此篇关于vue-video-player实现实时视频播放方式(监控设备-rtmp流)的文章就讲到这里了,如果你想了解更多关于vue-video-player实现实时视频播放方式(监控设备-rtmp流)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： jQuery基础知识小结
文章推荐： 解决springboot文件配置端口不起作用(默认8080)
文章推荐： 构建Maven多模块项目的方法
文章推荐： jQuery异步获取json数据方法汇总
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com