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流) 的全部内容, 来源链接: utcz.com/p/237844.html

回到顶部