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


Posted in Javascript onAugust 10, 2020

监控设备播放效果如下

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

1、vue项目安装vue-video-player

npm install vue-video-player --save

2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释)

注:style样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错

<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、父组件调用视频播放组件,点击“播放视频”替换组件里的视频流地址播放实时视频

<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配置

// 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

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地址

第四步:

引入使用组件:

<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流)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JavaScript流程控制(分支)
Dec 06 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
You might like
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
使用Javascript简单计算器
2018/11/17 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python将文本中的空格替换为换行的方法
2018/03/19 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
wxPython的安装与使用教程
2018/08/31 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
详解python datetime模块
2020/08/17 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
个人授权委托书范本
2014/04/03 职场文书
班级学习计划书
2014/04/27 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android