From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 25 Aug 2022 18:10:21 +0800
Subject: [PATCH] 更新后的细节调整

---
 src/components/mini/box15-videoPlayBox.vue |   35 +++++++++++++++++++++++++++++------
 1 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 008d666..99132eb 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -3,7 +3,7 @@
 		<div v-if="!this.$attrs.showTar">
 			正在播放: <span> {{playingVideoData.title}} </span>
 		</div>
-		<div class="myVideo fade">
+		<div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}">
 			<div id="videoPlay" ref="myVdeoPlay"></div>
 		</div>
 		<div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">
@@ -55,6 +55,7 @@
 	export default {
 		data() {
 			return {
+				disabledPointer: false,
 				dp: null,
 				playHistory: [],
 				playRecordIds: [],
@@ -64,7 +65,7 @@
 				currentTime: 0,
 				duration: 0,
 				playingVideoData: {
-					img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+					pic: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
 					url: "",
 					type: "normal",
 					title: "",
@@ -79,7 +80,7 @@
 			var _this = this;
 
 			//调整音量
-			_this.$message.success("模块加载完成,请注意音量是否合适..")
+			//_this.$message.success("模块加载完成,请注意音量是否合适..")
 
 			this.dp.volume(this.volumeInit, true, false);
 
@@ -101,6 +102,13 @@
 			this.dp.on('volumechange', function() {
 				_this.volumeInit = _this.dp.video.volume;
 			});
+			this.dp.on('loadedmetadata', function() {
+				_this.duration = _this.dp.video.duration;
+			});
+			this.dp.on('error', function() {
+				_this.duration = 0
+				_this.disabledPointer = true
+			});
 
 		},
 		methods: {
@@ -120,6 +128,7 @@
 			},
 			//切换视频源
 			swichPlay(videoId) {
+
 				if (this.swichLock) {
 					this.$message.info("切换太快啦,缓一缓..", 5)
 					return
@@ -163,14 +172,13 @@
 					this.$message.error("无效资源..")
 					return
 				}
-				
+
 				if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
 					videoData.type = "customHls";
 				} else {
 					videoData.type = "normal";
 				}
 
-				
 				//重要!!防止hls类型视频在切换后不停在后台缓存
 				if (this.hls != null) {
 					this.hls.destroy();
@@ -180,12 +188,16 @@
 
 				this.playingVideoData = videoData
 
+				this.disabledPointer = false;
 				this.isPlaying = false;
 
 				//重要!!防止hls类型视频在切换后不停在后台缓存
 				if (videoData.type == "customHls") {
 					this.hls = new Hls();
+
 				}
+
+				this.dp.notice("播放器加载完成..", 3)
 
 				this.dp.switchVideo(this.playingVideoData)
 
@@ -232,7 +244,18 @@
 								if (_this.hls != null) {
 									_this.hls.loadSource(video.src)
 									_this.hls.attachMedia(video)
+
+									// 监听Hls.Events.ERROR事件,
+									// DNS解析、下载超时,都会触发manifestLoadError错误
+									_this.hls.on(Hls.Events.ERROR, function(eventName, data) {
+										// 埋点上报,可以追踪data.details
+										// track()
+										_this.$message.error("hls加载异常", 5)
+										console.log(eventName);
+										console.log(data);
+									})
 								}
+
 							}
 						}
 					}
@@ -292,7 +315,7 @@
 		height: 180px;
 		background-color: #565656;
 		border-radius: 10px;
-		margin: 20px 0px;
+		margin: 20px auto;
 		display: grid;
 	}
 

--
Gitblit v1.9.1