质量管理（差SPC分析）

src/views/bigScreen/qualityManage/left3.vue

@@ -4,7 +4,8 @@
 			<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>
+					<!-- 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>
@@ -40,30 +41,12 @@ export default {
 			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()
-			}
-		})
+		let videoElement = document.getElementById('videoElement')
+		this.flvPlayer.attachMediaElement(videoElement)
+		this.flvPlayer.load()
+		this.flvPlayer.play()
 	},
 	beforeDestroy() {
 		this.flvPlayer.player.pause()
@@ -72,6 +55,26 @@ export default {
 		this.flvPlayer.player.destroy()
 		this.flvPlayer.player = null
 	},
+	methods: {},
+	created() {
+		if (flvjs.isSupported()) {
+			this.flvPlayer = flvjs.createPlayer(
+				{
+					type: 'flv', // 媒体类型 flv 或 mp4
+					isLive: true, // 是否为直播流
+					fluid: true,
+					// hasAudio: true, // 是否开启声音
+					stashInitialSize: 128, // 减少首桢显示等待时长
+					url: 'http://192.168.0.151:81/stream/live/livestream.flv',
+				},
+				{
+					enableStashBuffer: false,
+					fixAudioTimestampGap: false,
+					isLive: true,
+				}
+			)
+		}
+	},
 }
 </script>
 
@@ -82,6 +85,10 @@ export default {
 	._img {
 		width: 310px;
 		height: 229px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
 		video {
 			width: 100%;
 			height: 100%;
@@ -89,8 +96,8 @@ export default {
 	}
 	.text {
 		flex: 1;
-		padding: 0 15px;
-		background-color: rgba(145, 213, 254, 0.15);
+		padding: 15px;
+		// background-color: rgba(145, 213, 254, 0.15);
 	}
 }
 </style>