<template>
|
<div class="rightbox">
|
<div class="title">
|
<span>视频监控</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="monitor_box">
|
<div class="monitor_border_right_one">
|
<div class="monitor">
|
<video
|
class="video-js"
|
id="right_one"
|
controls
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
<div class="monitor_border_left_one">
|
<div class="monitor">
|
<video
|
class="video-js"
|
id="left_one"
|
controls
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
|
<div class="monitor_border_right_three">
|
<div class="monitor">
|
<video
|
class="video-js"
|
id="right_three"
|
controls
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
|
<div class="monitor_border_right_five">
|
<div class="monitor">
|
<video
|
class="video-js"
|
id="right_five"
|
controls
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
|
<div class="monitor_border_left_two">
|
<div class="monitor">
|
<video
|
class="video-js"
|
id="left_two"
|
controls
|
data-setup="{}"
|
style="
|
object-fit: fill;
|
width: 100%;
|
height: 100%;
|
border-radius: 4%;
|
"
|
autoplay="autoplay"
|
muted
|
>
|
<source type="application/x-mpegURL" />
|
</video>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "axios";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
LeftOne: null,
|
LeftTwo: null,
|
RightOne: null,
|
RightTwo: null,
|
RightThree: null,
|
RightFour: null,
|
RightFive: null,
|
RightSix: null,
|
};
|
},
|
//方法集合
|
mounted () {
|
this.RightOne = VideoJson.Video_Right_One;
|
this.RightThree = VideoJson.Video_Right_Three;
|
this.RightFive = VideoJson.Video_Right_Five;
|
this.LeftOne = VideoJson.Video_Left_One;
|
this.LeftTwo = VideoJson.Video_Left_Two;
|
this.getVideoPlay();
|
},
|
methods: {
|
getVideoPlay () {
|
this.LeftOne_Video = videojs(
|
"left_one",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
method: true,
|
},
|
function onPlayerReady () {
|
// this.play();
|
}
|
);
|
this.LeftTwo_Video = videojs(
|
"left_two",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
method: true,
|
},
|
function onPlayerReady () {
|
// this.play();
|
}
|
);
|
this.RightOne_Video = videojs(
|
"right_one",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
method: true,
|
},
|
function onPlayerReady () {
|
// this.play();
|
}
|
);
|
|
this.RightThree_Video = videojs(
|
"right_three",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
method: true,
|
},
|
function onPlayerReady () {
|
// this.play();
|
}
|
);
|
|
this.RightFive_Video = videojs(
|
"right_five",
|
{
|
autoplay: true,
|
controls: false, // 是否显示控制条
|
method: true,
|
},
|
function onPlayerReady () {
|
// this.play();
|
}
|
);
|
var that = this;
|
$(document).ready(function () {
|
that.LeftOne_Video.src([
|
{ type: "application/x-mpegURL", src: that.LeftOne },
|
]);
|
that.LeftOne_Video.controls = false;
|
that.LeftOne_Video.method = false;
|
that.LeftOne_Video.play();
|
|
that.LeftTwo_Video.src([
|
{ type: "application/x-mpegURL", src: that.LeftTwo },
|
]);
|
that.LeftTwo_Video.controls = false;
|
that.LeftTwo_Video.method = false;
|
that.LeftTwo_Video.play();
|
that.RightOne_Video.src([
|
{ type: "application/x-mpegURL", src: that.RightOne },
|
]);
|
that.RightOne_Video.controls = false;
|
that.RightOne_Video.method = false;
|
that.RightOne_Video.play();
|
that.RightThree_Video.src([
|
{ type: "application/x-mpegURL", src: that.RightThree },
|
]);
|
that.RightThree_Video.controls = false;
|
that.RightThree_Video.method = false;
|
that.RightThree_Video.play();
|
that.RightFive_Video.src([
|
{ type: "application/x-mpegURL", src: that.RightFive },
|
]);
|
that.RightFive_Video.controls = false;
|
that.RightFive_Video.method = false;
|
that.RightFive_Video.play();
|
});
|
},
|
},
|
destroyed () {
|
this.LeftOne.dispose();
|
this.LeftTwo.dispose();
|
this.RightOne.dispose();
|
|
this.RightThree.dispose();
|
|
this.RightFive.dispose();
|
},
|
created () { },
|
};
|
</script>
|
<style>
|
.vjs-loading-spinner {
|
display: none !important;
|
}
|
</style>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.rightbox {
|
overflow: hidden;
|
width: 100%;
|
box-sizing: border-box;
|
height: 100%;
|
.title {
|
width: 100%;
|
|
position: relative;
|
|
img {
|
width: 100%;
|
}
|
|
span {
|
font-size: 78px;
|
font-weight: 400;
|
color: #ffe86b;
|
background: linear-gradient(0deg, #bce7ff 0%, #69efff 98.6572265625%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
}
|
}
|
|
.monitor_border_left_one {
|
width: 58%;
|
height: 46%;
|
position: absolute;
|
left: 40%;
|
}
|
|
.monitor_border_left_two {
|
width: 58%;
|
height: 46%;
|
position: absolute;
|
top: 49%;
|
left: 40%;
|
}
|
|
.monitor_border_right_one {
|
width: 38%;
|
height: 30%;
|
position: absolute;
|
}
|
.monitor_border_right_three {
|
width: 38%;
|
height: 30%;
|
position: absolute;
|
top: 33.35%;
|
}
|
.monitor_border_right_five {
|
width: 38%;
|
height: 30%;
|
position: absolute;
|
|
top: 65%;
|
}
|
.monitor_box {
|
margin-top: 90px;
|
flex-wrap: wrap;
|
padding-top: 40px;
|
position: relative;
|
height: 90%;
|
.monitor {
|
width: 100%;
|
height: 100%;
|
//background: url("../../../assets/img/zonlan (14).png") no-repeat center;
|
background-size: 100% 100%;
|
border: 5px solid #078ecd;
|
border-radius: 4%;
|
}
|
}
|
}
|
|
@media only screen and (max-width: 2560px) {
|
.rightbox {
|
overflow: visible;
|
.monitor_border_left_one {
|
width: 100%;
|
height: 20%;
|
display: none;
|
}
|
.monitor_border_left_two {
|
width: 100%;
|
height: 25%;
|
top: 0;
|
left: 0%;
|
}
|
.monitor_border_right_one {
|
width: 100%;
|
height: 25%;
|
top: 26%;
|
left: 0;
|
}
|
.monitor_border_right_two {
|
width: 100%;
|
height: 20%;
|
top: 25%;
|
left: 0;
|
}
|
.monitor_border_right_three {
|
width: 100%;
|
height: 25%;
|
top: 52%;
|
left: 0;
|
}
|
.monitor_border_right_four {
|
width: 49%;
|
height: 25%;
|
top: 52%;
|
left: 51%;
|
}
|
.monitor_border_right_five {
|
width: 100%;
|
height: 25%;
|
top: 78%;
|
left: 0%;
|
}
|
.monitor_border_right_six {
|
width: 49%;
|
height: 25%;
|
top: 82.5%;
|
left: 51%;
|
}
|
}
|
}
|
</style>
|
