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

<template>
	<div>
		<container2 title="视频检验系统实况">
			<div class="box">
				<div class="_img">
					<!-- <img src="./1.jpg" alt="" /> -->
					<video id="videoElement" 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">正在进行XXXX作业建议正在进行XXXX作业建议</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 {
			flvPlayer: null,
		}
	},
	methods: {},
	mounted() {
		this.$nextTick(() => {
			if (flvjs.isSupported()) {
				var videoElement = document.getElementById('videoElement')
				this.flvPlayer = flvjs.createPlayer(
					{
						type: 'flv',
						isLive: true,
						fluid: true,
						stashInitialSize: 128, // 减少首桢显示等待时长
						url: 'http://192.168.0.151:81/stream/live/livestream.flv',
					},
					{
						enableStashBuffer: false,
						fixAudioTimestampGap: false,
						isLive: true,
					}
				)
				this.flvPlayer.attachMediaElement(videoElement)
				this.flvPlayer.load()
				this.flvPlayer.play()
			}
		})
	},
	beforeDestroy() {
		this.flvPlayer.player.pause()
		this.flvPlayer.player.unload()
		this.flvPlayer.player.detachMediaElement()
		this.flvPlayer.player.destroy()
		this.flvPlayer.player = null
	},
}
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	padding: 0 10px 0 0;
	._img {
		width: 310px;
		height: 229px;
		video {
			width: 100%;
			height: 100%;
		}
	}
	.text {
		flex: 1;
		padding: 0 15px;
		background-color: rgba(145, 213, 254, 0.15);
	}
}
</style>