安全管理left1视频

src/views/bigScreen/securityManage/left1.vue

@@ -6,7 +6,10 @@
 					<el-col :span="24">
 						<!-- <div id="left1" ref="left1" class="chart1"></div> -->
 						<div style="height: 270px; margin: 14px 0 8px">
-							<img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" />
+							<!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> -->
+							<video style="width: 100%; height: 100%" id="videoElement" muted autoplay>
+								Your browser is too old which doesn't support HTML5 video.
+							</video>
 						</div>
 						<div style="text-align: right; margin-bottom: 14px; font-size: 14px">
 							<span style="opacity: 0.9">视频监控 / </span>
@@ -75,6 +78,8 @@
 </template>
 
 <script>
+import flvjs from 'flv.js'
+
 import rocketTit from '../components/rocketTit/index.vue'
 import container from './components/container/index.vue'
 import bigScreenTabs from '../components/bigScreenTabs/index.vue'
@@ -141,14 +146,26 @@ export default {
 					status: 3,
 				},
 			],
+			flvPlayer: null,
 		}
 	},
 	mounted() {
+		let videoElement = document.getElementById('videoElement')
+		this.flvPlayer.attachMediaElement(videoElement)
+		this.flvPlayer.load()
+		this.flvPlayer.play()
 		this.$nextTick(() => {
 			// this.initChart()
 			// this.initLine()
 		})
 	},
+	beforeDestroy() {
+		this.flvPlayer.player.pause()
+		this.flvPlayer.player.unload()
+		this.flvPlayer.player.detachMediaElement()
+		this.flvPlayer.player.destroy()
+		this.flvPlayer.player = null
+	},
 	methods: {
 		initChart() {
 			this.chart = echarts.init(this.$refs.left1, 'macarons')
@@ -322,6 +339,25 @@ export default {
 			})
 		},
 	},
+	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>