vis389/src/views/bigScreen/qualityManage/left3.vue

<template>
	<div>
		<container2 title="视频检验系统实况">
			<div class="box">
				<div class="_img">
					<!-- <img src="./1.jpg" alt="" /> -->
					<!-- muted controls autoplay -->
					<video id="videoElement" muted 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 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'
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()
			}
		})
	},
}
</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);
	}
}
</style>