质量管理添加flv.js

src/views/bigScreen/qualityManage/left3.vue

@@ -3,7 +3,8 @@
 		<container2 title="视频检验系统实况">
 			<div class="box">
 				<div class="_img">
-					<img src="./1.jpg" alt="" />
+					<!-- <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>
@@ -15,6 +16,8 @@
 </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'
@@ -33,9 +36,42 @@ export default {
 		container2,
 	},
 	data() {
-		return {}
+		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>
 
@@ -46,7 +82,7 @@ export default {
 	._img {
 		width: 310px;
 		height: 229px;
-		img {
+		video {
 			width: 100%;
 			height: 100%;
 		}