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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
js实现随机抽奖
2020/03/19 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python正则表达式使用经典实例
2016/06/21 Python
Golang与python线程详解及简单实例
2017/04/27 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
英国电子专家:maplin
2019/09/04 全球购物
经典c++面试题四
2015/05/14 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
2014年双拥工作总结
2014/11/21 职场文书
财务人员个人工作总结
2015/02/27 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
门面租赁合同范文
2019/08/06 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Python jiaba库的使用详解
2021/11/23 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers