vue实现监控视频直播的示例代码
作者：踏行JAVA
本文主要介绍了vue实现监控视频直播的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
要想使用videojs我们势必是需要安装videojs的, 而且在生产环境中我们也需要依赖它, 所以如下
npm: npm install video.js -S npm install videojs-flash videojs-contrib-hls -S
我们打开Vue工程中的主入口main.js进行引入
// 引入videojs import Video from 'video.js'; import 'video.js/dist/video-js.css'; Vue.prototype.$video = Video; import hls from 'videojs-contrib-hls'; Vue.use(hls); // 要播放hls流
创建监控视频九宫格
<template>
<div class="cell">
<div class="cell-player">
<div :class="cellClass(i)" v-for="i in cellCount" :key="i">
<playVideo :video="videoInfo[i]" v-if="cellCount != 6"></playVideo>
<playVideo :video="videoInfo[i]" v-if="cellCount == 6 && i != 2 && i != 3"></playVideo>
<template v-if="cellCount == 6 && i == 2">
<div class="cell-player-6-2-cell">
<playVideo :video="videoInfo[i]"></playVideo>
<playVideo :video="videoInfo[++i]"></playVideo>
</div>
</template>
</div>
</div>
<div class="cell-tool">
<div class="bk-button-group">
<!-- <el-button @click="cellCount = 1" size="small">1</el-button>-->
<el-button @click="cellCount = 4" size="small">4</el-button>
<!-- <el-button @click="cellCount = 6" size="small">6</el-button>-->
<el-button @click="cellCount = 9" size="small">9</el-button>
<!-- <el-button @click="cellCount = 16" size="small">16</el-button>-->
</div>
</div>
</div>
</template>
<script>
import playVideo from '@/views/test/playVideo'
export default {
name: 'dashboard',
components: {
playVideo
},
data() {
return {
videoInfo: [
{url: "", index: 0, name: "测试1"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a72s5d84ded3180d81.m3u8", index: 1, name: "测试1"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded3180d81.m3u8", index: 2, name: "测试2"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a7s25d84ded3180d81.m3u8", index: 3, name: "测试3"},
{url: "http://hls01open.ys7.com/openlive/b27fa374e9d749ddb22bs4a12e843a3131.m3u8", index: 10, name: "测试4"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a7s2s5d84ded3180d8.m3u8", index: 4, name: "测试5"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded3180d8.m3u8", index: 5, name: "测试6"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded31280d8.m3u8", index: 6, name: "测试7"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded33180d8.m3u8", index: 7, name: "测试8"},
{url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded31480d8.m3u8", index: 8, name: "测试9"},
],
cellCount: 9
}
},
methods: {},
computed: {
cellClass() {
return function (index) {
switch (this.cellCount) {
case 1:
return ['cell-player-1']
case 4:
return ['cell-player-4']
case 6:
if (index == 1)
return ['cell-player-6-1']
if (index == 2)
return ['cell-player-6-2']
if (index == 3)
return ['cell-player-6-none']
return ['cell-player-6']
case 9:
return ['cell-player-9']
case 16:
return ['cell-player-16']
default:
break;
}
}
},
},
}
</script>
<style>
.cell-tool {
height: 40px;
line-height: 30px;
padding: 0 7px;
}
.cell-player {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cell-player-4 {
width: 50%;
height: 50% !important;
box-sizing: border-box;
}
.cell-player-1 {
width: 100%;
box-sizing: border-box;
}
.cell-player-6-1 {
width: 66.66%;
height: 66.66% !important;
box-sizing: border-box;
}
.cell-player-6-2 {
width: 33.33%;
height: 66.66% !important;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.cell-player-6-none {
display: none;
}
.cell-player-6-2-cell {
width: 100%;
height: 50% !important;
box-sizing: border-box;
}
.cell-player-6 {
width: 33.33%;
height: 33.33% !important;
box-sizing: border-box;
}
.cell-player-9 {
width: 33.33%;
height: 33.33% !important;
box-sizing: border-box;
}
.cell-player-16 {
width: 25%;
height: 25% !important;
box-sizing: border-box;
}
.cell {
display: flex;
flex-direction: column;
height: 100%;
}
</style>创建视频容器
虽然是遍历视频容器组件，但是监控视频只播放第一个，所以这里创建视频容器时，需要保证容器id不一致。
<template>
<div class="player">
<div>{{video.name}}</div>
<video :id='"A"+video.index'
style="width: 100%;"
class="video-js vjs-default-skin vjs-big-play-centered "> </video>
</div>
</template>
<script>
export default {
name: "playVideo",
props: {
video: {
url: "",
index:0,
}
},
data() {return {}},
mounted() {
this.initVideoPlayer();
},
methods: {
initVideoPlayer() {
var that=this;
var id="#A"+this.video.index;
const currentInstance = that.$video(document.querySelector(id),{
autoplay:true,
controls:true
}).src({
src: that.video.url,
type: 'application/x-mpegURL',
})
},
}
}
</script>
<style scoped>
.player {
background-color: black;
width: 100%;
height: 100%;
border: 1px solid white;
color: white;
text-align: center;
}
</style>
到此这篇关于vue实现监控视频直播的示例代码的文章就介绍到这了,更多相关vue 监控视频直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！