williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
熊丽君
2021-12-30 17:36:28 +08:00
parent 3e8684cb8d
commit 20834b71b7
9 changed files with 1304 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/views/bigScreen/qualityManage/left3.vue
View File

@ -1,107 +1,114 @@
<template>
<div>
<container2 title="视频检验系统实况">
<div class="box">
<div class="_img">
<!-- <img src="./1.jpg" alt="" /> -->
<!-- muted controls autoplay -->
<video id="videoElement" muted controls autoplay>Your browser is too old which doesn't support HTML5 video.</video>
</div>
<div class="text">
<p style="opacity: 0.8">实况信息</p>
<p style="opacity: 0.5; color: #91d5fe; font-size: 14px">{{ videoInfo.videoNowInfo }}</p>
</div>
</div>
</container2>
</div>
<div>
<container2 title="视频检验系统实况">
<div class="box">
<div class="_img">
<!-- <img src="./1.jpg" alt="" /> -->
<!-- muted controls autoplay -->
<video id="videoElement" muted controls autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<div class="text">
<p style="opacity: 0.8">实况信息</p>
<p style="opacity: 0.5; color: #91d5fe; font-size: 14px">
{{ videoInfo.videoNowInfo }}
</p>
</div>
</div>
</container2>
</div>
</template>
<script>
import flvjs from 'flv.js'
import flvjs from "flv.js";
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue'
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "./components/container2/index.vue";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
mixins: [resize],
name: 'left3',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container2,
},
data() {
return {
videoInfo: {},
flvPlayer: null,
}
},
beforeDestroy() {
this.flvPlayer.player.pause()
this.flvPlayer.player.unload()
this.flvPlayer.player.detachMediaElement()
this.flvPlayer.player.destroy()
this.flvPlayer.player = null
},
methods: {},
created() {
this.request({
url: '/hx/qualityAssurance/getHxVideoSystem',
method: 'get',
}).then(({ data }) => {
this.videoInfo = data[0]
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer(
{
type: 'flv', // 媒体类型 flv 或 mp4
isLive: true, // 是否为直播流
fluid: true,
// hasAudio: true, // 是否开启声音
stashInitialSize: 128, // 减少首桢显示等待时长
url: this.videoInfo.videoAddress,
},
{
enableStashBuffer: false,
fixAudioTimestampGap: false,
isLive: true,
}
)
let videoElement = document.getElementById('videoElement')
this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.load()
this.flvPlayer.play()
}
})
},
}
mixins: [resize],
name: "left3",
components: {
scalseBox,
bigScreenHead,
rocketTit,
container2,
},
data() {
return {
videoInfo: {},
flvPlayer: null,
};
},
beforeDestroy() {
if (this.flvPlayer) {
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
}
},
methods: {},
created() {
this.request({
url: "/hx/qualityAssurance/getHxVideoSystem",
method: "get",
}).then(({ data }) => {
this.videoInfo = data[0];
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer(
{
type: "flv", // 媒体类型 flv 或 mp4
isLive: true, // 是否为直播流
fluid: true,
// hasAudio: true, // 是否开启声音
stashInitialSize: 128, // 减少首桢显示等待时长
url: this.videoInfo.videoAddress,
// url: "http://192.168.0.151:81/stream/live/classic_cases_video.flv",
},
{
enableStashBuffer: false,
fixAudioTimestampGap: false,
isLive: true,
}
);
let videoElement = document.getElementById("videoElement");
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
});
},
};
</script>
<style lang="scss" scoped>
.box {
display: flex;
padding: 0 10px 0 0;
._img {
width: 310px;
height: 229px;
img {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
}
.text {
flex: 1;
padding: 15px;
// background-color: rgba(145, 213, 254, 0.15);
}
display: flex;
padding: 0 10px 0 0;
._img {
width: 310px;
height: 229px;
img {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
}
.text {
flex: 1;
padding: 15px;
// background-color: rgba(145, 213, 254, 0.15);
}
}
</style>