From b1c2dd1869a51b8f0e4acb9ddeb148f796db147f Mon Sep 17 00:00:00 2001
From: huanghongfeng <huanghongfeng@hnkhzn.com>
Date: 星期三, 25 六月 2025 19:10:58 +0800
Subject: [PATCH] 1
---
项目代码/DP/src/views/indexs/center-map.vue | 104 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 74 insertions(+), 30 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
index 3b3a7e8..f04a88e 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
@@ -10,12 +10,12 @@
autoplay
preload="auto"
muted
- @click="unmuteVideo"
+ @click="handleVideoClick"
>
鎮ㄧ殑娴忚鍣ㄤ笉鏀寔瑙嗛鎾斁銆�
</video>
- <div v-if="isMuted" class="mute-hint" @click="unmuteVideo">
- <span>鐐瑰嚮鍙栨秷闈欓煶锛�5绉掑悗鑷姩鎾斁澹伴煶锛�</span>
+ <div v-if="showUnmuteButton" class="unmute-button" @click="unmuteVideo">
+ <span>馃攪 鐐瑰嚮鍙栨秷闈欓煶</span>
</div>
</dv-border-box-13>
</div>
@@ -26,45 +26,81 @@
export default {
data() {
return {
- isMuted: false,
- unmuteTimeout: null // 瀛樺偍瀹氭椂鍣ㄤ互渚挎竻鐞�
+ showUnmuteButton: true, // 鏄剧ず鍙栨秷闈欓煶鎸夐挳
+ hasUserInteracted: false, // 璁板綍鐢ㄦ埛鏄惁宸蹭氦浜�
+ wasPlaying: false // 璁板綍瑙ｉ櫎闈欓煶鍓嶇殑鎾斁鐘舵��
};
},
mounted() {
this.initVideo();
this.adjustVideoSize();
window.addEventListener('resize', this.adjustVideoSize);
-
- // 5绉掑悗鑷姩鍙栨秷闈欓煶
- this.unmuteTimeout = setTimeout(() => {
- this.unmuteVideo();
- }, 5000);
},
beforeDestroy() {
window.removeEventListener('resize', this.adjustVideoSize);
- if (this.unmuteTimeout) {
- clearTimeout(this.unmuteTimeout); // 娓呴櫎瀹氭椂鍣ㄩ伩鍏嶅唴瀛樻硠婕�
+ const video = this.$refs.videoPlayer;
+ if (video) {
+ video.removeEventListener('error', this.handleVideoError);
}
},
methods: {
- initVideo() {
+ async initVideo() {
const video = this.$refs.videoPlayer;
if (video) {
- video.addEventListener('ended', () => {
- video.currentTime = 0;
- video.play();
- });
+ // 纭繚瑙嗛浠ラ潤闊崇姸鎬佸紑濮�
+ video.muted = true;
+
+ // 娣诲姞閿欒鐩戝惉
+ video.addEventListener('error', this.handleVideoError);
+
+ // 灏濊瘯鑷姩鎾斁锛堥潤闊崇姸鎬佷笅閫氬父鍏佽锛�
+ try {
+ await video.play();
+ this.wasPlaying = true;
+ } catch (error) {
+ console.log('鑷姩鎾斁琚樆姝�:', error);
+ }
}
- document.addEventListener('click', this.unmuteVideo, { once: true });
},
- unmuteVideo() {
+
+ handleVideoClick() {
+ if (!this.hasUserInteracted) {
+ this.hasUserInteracted = true;
+ // 鐢ㄦ埛绗竴娆＄偣鍑昏棰戞椂灏濊瘯瑙ｉ櫎闈欓煶
+ this.unmuteVideo();
+ }
+ },
+
+ async unmuteVideo() {
const video = this.$refs.videoPlayer;
- if (video) {
+ if (!video) return;
+
+ // 璁板綍褰撳墠鎾斁鐘舵��
+ this.wasPlaying = !video.paused;
+
+ try {
+ // 鍏堢‘淇濊棰戝湪鎾斁
+ if (this.wasPlaying) {
+ await video.play();
+ }
+
+ // 瑙ｉ櫎闈欓煶
video.muted = false;
- video.volume = 1.0;
- this.isMuted = false;
+
+ // 闅愯棌鍙栨秷闈欓煶鎸夐挳
+ this.showUnmuteButton = false;
+ } catch (error) {
+ console.error('瑙ｉ櫎闈欓煶澶辫触:', error);
+ // 鏄剧ず鎻愮ず锛屽憡鐭ョ敤鎴烽渶瑕佷氦浜掓墠鑳芥挱鏀惧０闊�
+ this.showUnmuteButton = true;
}
},
+
+ handleVideoError(e) {
+ const video = e.target;
+ console.error('瑙嗛閿欒:', video.error);
+ },
+
adjustVideoSize() {
const video = this.$refs.videoPlayer;
if (video) {
@@ -78,7 +114,6 @@
</script>
<style scoped>
-/* 鏍峰紡淇濇寔涓嶅彉 */
.centermap {
width: 100%;
height: 100%;
@@ -106,18 +141,27 @@
width: 100%;
height: 100%;
object-fit: cover;
+ cursor: pointer;
}
-.mute-hint {
+.unmute-button {
position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(0,0,0,0.7);
+ bottom: 20px;
+ right: 20px;
+ background: rgba(0, 0, 0, 0.7);
color: white;
- padding: 10px 20px;
- border-radius: 5px;
+ padding: 8px 16px;
+ border-radius: 20px;
cursor: pointer;
z-index: 10;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.9);
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3