livePlayer的说明文档：
https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event
1、安装：
npm install @liveqing/liveplayer
npm i -D copy-webpack-plugin
2、引入：
在webpack.dev.conf.js / vue.config.js文件下plugins中声明插件new CopyWebpackPlugin引入和声明插件：
const CopyWebpackPlugin = require('copy-webpack-plugin')
......
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/'}
])]
......
3、在index.html中引入：
<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>
<!-- 直接复制 放在<head>标签里面 没写会报错 videojs is not defined -->
4、使用：
<template>
<div class="video-container" >
<div class="videoPlay">
<live-player
class="video"
ref="player"
:videoUrl="videoUrl"
v-loading="loading"
fluent
autoplay
live
stretch></live-player>
</div>
<div class="videoControl" id="video_dialog">
<div class="video_button">
<el-button type="primary" @click="play(players)" >播放</el-button>
<el-button type="primary" @click="stop()">暂停</el-button>
</div>
<div class="video_button" >
<el-button type="primary" @click="ptzControl('zoomin')">放大</el-button>
<el-button type="primary" @click="ptzControl('zoomout')">缩小</el-button>
</div>
<div class="video_button" >
<el-button type="primary" @click="ptzControl('left')"> 左</el-button>
<el-button type="primary" @click="ptzControl('up')">上</el-button>
<el-button type="primary" @click="ptzControl('right')"> 右</el-button>
<el-button type="primary" @click="ptzControl('down')">下</el-button>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
//需要用到的接口
import {Login,getChannelList,streamStart,controlPtz,streamStop} from '../plugins/request'
export default {
data() {
return {
camidList: [],
players: [],
token: '',
code: '',
serial: '',
command: '',
streamID: '',
videoUrl: '',
loading: false
}
},
components: {
LivePlayer
},
mounted() {
this.getChannels()
},
methods: {
getChannels() {
// 接口需要token 调用登录接口获取token
this.loading = true
const parmas = {
'username': '',
'password': ''
}
Login(parmas.username,parmas.password).then(res => {
this.token = res.data.URLToken
getChannelList(this.token,'true').then(res => {
this.players = res.data.ChannelList
this.shuld(this.players[0])
})
})
},
shuld(data) {
this.serial = data.DeviceID
this.code = data.ID
this.play()
},
play() {
this.loading = true
streamStart(this.serial,this.code,this.token).then(res => {
this.videoUrl = res.data.FLV || ''
this.streamID = res.data.StreamID
this.loading = false
})
},
ptzControl(command) {
controlPtz(this.serial,this.code,command,this.token).then(res => {
console.log(res)
window.setTimeout(() => {
this.ptzStop()
}, 100)
} )
},
ptzStop() {
controlPtz(this.serial,this.code,'stop',this.token).then(res => {
console.log(res)
})
},
stop() {
streamStop(this.serial,this.code,this.token).then(res => {
console.log(res)
})
}
}
}
</script>
<style>
.video-container {
display: flex;
flex-flow: row nowrap;
}
.video {
width: 100%;
}
.videoControl {
width: 30%;
}
.video_button {
margin-top: 20px;
margin-left: 30px;
}
.videoPlay {
width: 60%;
}
</style>
效果：
image.png
网友评论