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