From 3fb594dc317848107fd7bbb51631cfb763c19f5f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 05 六月 2024 18:47:03 +0800
Subject: [PATCH] 舞蹈分页
---
src/books/English/view/components/index.vue | 55 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 47 insertions(+), 8 deletions(-)
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 3af9f8a..7729adb 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -18,7 +18,11 @@
:showPageList="loadPageList"
></chapterOne>
</div>
- <miniAudio :path="audioPath"></miniAudio>
+ <miniAudio
+ :path="audioPath"
+ :currentTime="currentTime"
+ ref="audioPlayer"
+ ></miniAudio>
</div>
</template>
@@ -47,7 +51,9 @@
loadPageList: [],
questionData: {},
renderSignMap: {},
- audioPath:''
+ audioPath: "",
+ currentTime: null,
+ videoList: [],
};
},
computed: {
@@ -82,7 +88,7 @@
setTimeout(() => {
this.initSwiper();
this.initViewer();
- this.getAduio();
+ // this.getAduio();
}, 200);
},
},
@@ -160,6 +166,7 @@
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
+ this.getAduio();
// 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
@@ -183,6 +190,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
+ this.handleAudio();
// 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
@@ -635,17 +643,48 @@
}
// chooseWords
},
- // 鑾峰彇auido瀹炰緥
+ // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
let allVideo = (
this.container ? this.container : document
).querySelectorAll(".audio");
- allVideo = Array.from(allVideo)
+ allVideo = Array.from(allVideo);
+ this.videoList = allVideo;
if (allVideo.length) {
- const playAudio = allVideo.reverse().find((item) => item.paused == false);
+ // 鏌ユ壘鎾斁鐘舵�佺殑鏈�鍚庝竴鏉￠煶棰�
+ const playAudio = allVideo
+ .reverse()
+ .find((item) => item.paused == false);
if (playAudio) {
- console.log("绗釜闊抽鍦ㄦ挱鏀�", playAudio.src);
- this.audioPath = playAudio.src
+ const bottomGap = playAudio.getBoundingClientRect().bottom;
+ if (bottomGap < 0) {
+ playAudio.pause();
+ this.audioPath = playAudio.src;
+ this.currentTime = playAudio.currentTime;
+ }
+ }
+ }
+ },
+ // 椤甸潰鍚戜笂婊氬姩锛岄煶棰戝皬绐楀洖鏀�
+ handleAudio() {
+ if (!this.audioPath) return false;
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".audio");
+ allVideo = Array.from(allVideo);
+ if (allVideo.length) {
+ //鏌ユ壘涓庡皬绐楁挱鏀鹃煶棰戝悓婧愮殑椤甸潰audio DOM
+ const playAudio = allVideo.find((item) => item.src == this.audioPath);
+ if (playAudio) {
+ const bottomGap = playAudio.getBoundingClientRect().bottom;
+ if (bottomGap >= 0) {
+ if (this.$refs.audioPlayer) {
+ const playerState = this.$refs.audioPlayer.getVideoPlayer();
+ this.audioPath = "";
+ playAudio.currentTime = playerState.currentTime;
+ if (!playerState.paused) playAudio.play();
+ }
+ }
}
}
},
--
Gitblit v1.9.1