From 1cf6d9fb8cf2f10e302509f033d8d55b4e60712c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 01:45:42 +0800
Subject: [PATCH] 优化友链布局,月台窗口自适应,处理hls取消后仍然缓存问题

---
 src/components/mini/box15-videoPlayBox.vue |   92 ++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 0a6b19b..34690fd 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -3,13 +3,18 @@
 		<div>
 			正在播放: <span> {{playingVideoData.title}} </span>
 		</div>
-		<div class="myVideo">
+		<div class="myVideo fade">
 			<div id="videoPlay" ref="myVdeoPlay"></div>
 		</div>
 		<div style="border-radius: 0 0 4px 4px;">
 			<div style="padding: 10px 0px;">
 				音量 :
 				<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
+			</div>
+			<div style="padding: 10px 0px;">
+				播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
+				{{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
+				<a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
 			</div>
 			<a-collapse activeKey="playHistory">
 				<a-collapse-panel key="playHistory" header="播放记录">
@@ -18,7 +23,9 @@
 							<a-tooltip placement="bottomRight" title="播放/暂停">
 								<div @click="togglePlay" class="playItem">
 									{{item.title}}
-									<a-icon type="youtube" class="playIcon" />
+									<span v-if="!isPlaying " class="myTip">(已暂停)</span>
+									<a-icon type="youtube" class="playIcon "
+										v-bind:class="{ activeElement: isPlaying }" />
 								</div>
 							</a-tooltip>
 						</div>
@@ -52,6 +59,8 @@
 				volumeInit: 0.1,
 				isPlaying: false,
 				swichLock: false,
+				currentTime: 0,
+				duration: 0,
 				playingVideoData: {
 					img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
 					url: "",
@@ -59,7 +68,7 @@
 					title: "",
 					id: ""
 				},
-
+				hls: null,
 			}
 		},
 		mounted() {
@@ -74,13 +83,23 @@
 
 			this.dp.on('pause', function() {
 				_this.$message.info("停止播放")
-				this.isPlaying = false;
+				_this.isPlaying = false;
 			});
 
 			this.dp.on('play', function() {
 				_this.$message.info("开始播放..")
-				this.isPlaying = true;
+				_this.isPlaying = true;
+				_this.duration = _this.dp.video.duration;
+				_this.currentTime = _this.dp.video.currentTime;
 			});
+			this.dp.on('timeupdate', function() {
+				//_this.$message.info("进度..")
+				_this.currentTime = _this.dp.video.currentTime;
+			});
+			this.dp.on('volumechange', function() {
+				_this.volumeInit = _this.dp.video.volume;
+			});
+
 		},
 		methods: {
 			togglePlay() {
@@ -89,6 +108,9 @@
 			},
 			changeVolume(value) {
 				this.dp.volume(value, true, false);
+			},
+			changeTime(time) {
+				this.dp.seek(time)
 			},
 			//切换视频源
 			swichPlay(videoId) {
@@ -106,11 +128,12 @@
 				this.$message.info("切换视频源..", 1)
 				this.swichLock = !this.swichLock;
 
+
 				this.startPlay(tempData)
 
 				setTimeout(() => {
 					this.swichLock = !this.swichLock;
-				}, 5000);
+				}, 2000);
 
 				//通知父组件更换评论信息
 				this.$emit("swichPlay", tempData)
@@ -130,18 +153,29 @@
 			},
 			//加载播放
 			startPlay(videoData) {
+				//重要!!防止hls类型视频在切换后不停在后台缓存
+				if (this.hls != null) {
+					this.hls.destroy();
+				}
 
 				this.adjustOrder(videoData)
 
 				this.playingVideoData = videoData
 
 				this.isPlaying = false;
-				this.dp.switchVideo(this.playingVideoData, null)
 
+				//重要!!防止hls类型视频在切换后不停在后台缓存
+				if (videoData.type == "customHls") {
+					this.hls = new Hls();
+				}
 
+				setTimeout(() => {
+					this.dp.switchVideo(this.playingVideoData)
+				}, 500);
 			},
 			//播放器初始化
 			init() {
+				var _this = this;
 				this.dp = new DPlayer({
 					element: document.getElementById("videoPlay"),
 					//logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
@@ -152,7 +186,7 @@
 					lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
 					// screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
 					preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
-					volume: this.volumeInit, // 初始化音量
+					volume: _this.volumeInit, // 初始化音量
 					playbackSpeed: [2, 1, 0.5], //可选的播放速度,可自定义
 					contextmenu: [
 						//右键菜单
@@ -172,15 +206,17 @@
 						// },
 					],
 					video: {
-						pic: this.defalutImg, // 视频封面
+						pic: _this.defalutImg, // 视频封面
 						// url: videoInfo.url,
 						//url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
 						type: "normal",
 						customType: {
 							customHls: function(video, player) {
-								const hls = new Hls()
-								hls.loadSource(video.src)
-								hls.attachMedia(video)
+								//const hls = new Hls()
+								if (_this.hls != null) {
+									_this.hls.loadSource(video.src)
+									_this.hls.attachMedia(video)
+								}
 							}
 						}
 					}
@@ -205,7 +241,7 @@
 		padding: 10px;
 		border-radius: 5px;
 		margin: 10px;
-		transition: all .5s;
+		transition: all .3s;
 		position: relative;
 	}
 
@@ -214,7 +250,8 @@
 	}
 
 	.playItem:active {
-		transform: scale(0.75) translate3d(0, 0, 0);
+		// transform: scale(0.75) translate3d(0, 0, 0);
+		box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
 	}
 
 
@@ -227,7 +264,7 @@
 
 	.myVideo {
 		position: relative;
-		width: 300px;
+		width: 315px;
 		height: 180px;
 		background-color: #565656;
 		border-radius: 10px;
@@ -240,5 +277,28 @@
 		border-radius: 5px;
 	}
 
-	
+	.activeElement {
+		-webkit-animation: free_download 1s linear alternate infinite;
+		animation: free_download 1s linear alternate infinite;
+	}
+
+	@-webkit-keyframes free_download {
+		0% {
+			-webkit-transform: scale(1);
+		}
+
+		100% {
+			-webkit-transform: scale(1.2);
+		}
+	}
+
+	@keyframes free_download {
+		0% {
+			transform: scale(1);
+		}
+
+		100% {
+			transform: scale(1.2);
+		}
+	}
 </style>

--
Gitblit v1.9.1