电力
This commit is contained in:
@@ -568,135 +568,142 @@
|
||||
},
|
||||
{ passive: false }
|
||||
); // passive: false 必须，否则 preventDefault 无效
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 初始化所有视频容器
|
||||
function initVideoContainers() {
|
||||
const productRights = document.querySelectorAll('.product-right');
|
||||
|
||||
productRights.forEach((container, index) => {
|
||||
const video = container.querySelector('.right-video');
|
||||
const btn = container.querySelector('.video-play-btn');
|
||||
const img = container.querySelector('.right-img');
|
||||
if (!video || !btn || !img) return;
|
||||
const videoSrc = video.src.trim()
|
||||
// 修复：正确检测有效视频地址
|
||||
// 排除空字符串、null、undefined
|
||||
const hasValidVideo = !!videoSrc && videoSrc.trim() !== '' && videoSrc !== 'undefined' && videoSrc !== 'null';
|
||||
// 初始化所有视频容器
|
||||
function initVideoContainers() {
|
||||
const productRights = document.querySelectorAll('.product-right');
|
||||
// 支持的视频格式
|
||||
const supportedVideoFormats = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.flv', '.wmv'];
|
||||
productRights.forEach((container, index) => {
|
||||
const video = container.querySelector('.right-video');
|
||||
const btn = container.querySelector('.video-play-btn');
|
||||
const img = container.querySelector('.right-img');
|
||||
if (!video || !btn || !img) return;
|
||||
const videoSrc = video.src.trim()
|
||||
console.log(videoSrc,'=videoSrc=')
|
||||
// 修复：正确检测有效视频地址
|
||||
// 排除空字符串、null、undefined
|
||||
const hasValidVideo = !!videoSrc && videoSrc.trim() !== '' && videoSrc !== 'undefined' && videoSrc !== 'null';
|
||||
|
||||
// 初始化状态：无视频则保持图片显示，永不切换
|
||||
if (!hasValidVideo) {
|
||||
img.style.display = 'block';
|
||||
video.style.display = 'none';
|
||||
btn.style.display = 'none';
|
||||
// 绑定空方法，防止调用报错
|
||||
video.switchMedia = function() {};
|
||||
console.log(`容器${index}：无有效视频(src="${videoSrc}")，保持图片显示`);
|
||||
return;
|
||||
}
|
||||
// 验证视频格式是否有效
|
||||
const isValidFormat = supportedVideoFormats.some(format =>
|
||||
videoSrc.toLowerCase().endsWith(format) ||
|
||||
(videoSrc.includes('?') && videoSrc.toLowerCase().split('?')[0].endsWith(format))
|
||||
);
|
||||
|
||||
// 有有效视频的情况
|
||||
console.log(`容器${index}：有有效视频(src="${videoSrc}")，初始化播放逻辑`);
|
||||
|
||||
// 初始状态
|
||||
video.style.display = 'none';
|
||||
video.pause();
|
||||
img.style.display = 'block';
|
||||
btn.style.display = 'none';
|
||||
btn.style.opacity = '0';
|
||||
// 初始化状态：无视频或格式无效则保持图片显示，永不切换
|
||||
if (!hasValidVideo || !isValidFormat) {
|
||||
img.style.display = 'block';
|
||||
video.style.display = 'none';
|
||||
btn.style.display = 'none';
|
||||
// 绑定空方法，防止调用报错
|
||||
video.switchMedia = function() {};
|
||||
console.log(`容器${index}：无有效视频(src="${videoSrc}")，保持图片显示`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 同步状态函数
|
||||
function syncMediaState() {
|
||||
if (img.style.display === 'block') {
|
||||
btn.style.display = 'none';
|
||||
btn.style.opacity = '0';
|
||||
} else {
|
||||
btn.style.display = 'block';
|
||||
btn.style.opacity = '1';
|
||||
btn.classList.toggle('paused', !video.paused && !video.ended);
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮点击事件
|
||||
btn.addEventListener('click', () => {
|
||||
if (video.paused) {
|
||||
video.play().catch(() => syncMediaState());
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
syncMediaState();
|
||||
});
|
||||
|
||||
// 视频事件监听
|
||||
['play', 'pause', 'ended', 'playing', 'waiting'].forEach(event => {
|
||||
video.addEventListener(event, syncMediaState);
|
||||
});
|
||||
|
||||
// 滚动切换函数
|
||||
video.switchMedia = function(showVideo) {
|
||||
// 只处理有有效视频的情况
|
||||
if (showVideo) {
|
||||
img.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
video.play().catch(() => {
|
||||
console.log(`容器${index}：自动播放失败，需要用户交互`);
|
||||
syncMediaState();
|
||||
});
|
||||
} else {
|
||||
// 有有效视频的情况
|
||||
console.log(`容器${index}：有有效视频(src="${videoSrc}")，初始化播放逻辑`);
|
||||
|
||||
// 初始状态
|
||||
video.style.display = 'none';
|
||||
video.pause();
|
||||
img.style.display = 'block';
|
||||
video.style.display = 'none';
|
||||
}
|
||||
syncMediaState();
|
||||
};
|
||||
btn.style.display = 'none';
|
||||
btn.style.opacity = '0';
|
||||
|
||||
// 初始同步
|
||||
syncMediaState();
|
||||
});
|
||||
}
|
||||
// 同步状态函数
|
||||
function syncMediaState() {
|
||||
if (img.style.display === 'block') {
|
||||
btn.style.display = 'none';
|
||||
btn.style.opacity = '0';
|
||||
} else {
|
||||
btn.style.display = 'block';
|
||||
btn.style.opacity = '1';
|
||||
btn.classList.toggle('paused', !video.paused && !video.ended);
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动监听 - 优化版
|
||||
function setupScrollWatcher() {
|
||||
let ticking = false;
|
||||
|
||||
function updateVideoVisibility() {
|
||||
const productRights = document.querySelectorAll('.product-right');
|
||||
|
||||
productRights.forEach(container => {
|
||||
const video = container.querySelector('.right-video');
|
||||
if (!video || !video.switchMedia) return;
|
||||
// 按钮点击事件
|
||||
btn.addEventListener('click', () => {
|
||||
if (video.paused) {
|
||||
video.play().catch(() => syncMediaState());
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
syncMediaState();
|
||||
});
|
||||
|
||||
// 检查是否在视口中
|
||||
const rect = container.getBoundingClientRect();
|
||||
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||
const isInView = rect.top < viewHeight * 0.7 && rect.bottom > viewHeight * 0.3;
|
||||
|
||||
// 只对有有效视频的元素调用switchMedia
|
||||
video.switchMedia(isInView);
|
||||
});
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
// 使用requestAnimationFrame优化性能
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateVideoVisibility);
|
||||
ticking = true;
|
||||
// 视频事件监听
|
||||
['play', 'pause', 'ended', 'playing', 'waiting'].forEach(event => {
|
||||
video.addEventListener(event, syncMediaState);
|
||||
});
|
||||
|
||||
// 滚动切换函数
|
||||
video.switchMedia = function(showVideo) {
|
||||
// 只处理有有效视频的情况
|
||||
if (showVideo) {
|
||||
img.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
video.play().catch(() => {
|
||||
console.log(`容器${index}：自动播放失败，需要用户交互`);
|
||||
syncMediaState();
|
||||
});
|
||||
} else {
|
||||
video.pause();
|
||||
img.style.display = 'block';
|
||||
video.style.display = 'none';
|
||||
}
|
||||
syncMediaState();
|
||||
};
|
||||
|
||||
// 初始同步
|
||||
syncMediaState();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
initVideoContainers();
|
||||
setupScrollWatcher();
|
||||
|
||||
// 初始检查一次
|
||||
setTimeout(() => {
|
||||
const event = new Event('scroll');
|
||||
window.dispatchEvent(event);
|
||||
}, 300);
|
||||
});
|
||||
// 滚动监听 - 优化版
|
||||
function setupScrollWatcher() {
|
||||
let ticking = false;
|
||||
|
||||
function updateVideoVisibility() {
|
||||
const productRights = document.querySelectorAll('.product-right');
|
||||
|
||||
productRights.forEach(container => {
|
||||
const video = container.querySelector('.right-video');
|
||||
if (!video || !video.switchMedia) return;
|
||||
|
||||
// 检查是否在视口中
|
||||
const rect = container.getBoundingClientRect();
|
||||
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||
const isInView = rect.top < viewHeight * 0.7 && rect.bottom > viewHeight * 0.3;
|
||||
|
||||
// 只对有有效视频的元素调用switchMedia
|
||||
video.switchMedia(isInView);
|
||||
});
|
||||
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
// 使用requestAnimationFrame优化性能
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateVideoVisibility);
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
initVideoContainers();
|
||||
setupScrollWatcher();
|
||||
|
||||
// 初始检查一次
|
||||
setTimeout(() => {
|
||||
const event = new Event('scroll');
|
||||
window.dispatchEvent(event);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
window.onload = function () {
|
||||
if (typeof Swiper === 'undefined') {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
{block name="main"}
|
||||
<a class="header" href="/">
|
||||
<div class="header-img">
|
||||
<img src="__IMAGES__/logo.png" alt="">
|
||||
<!-- <img src="__IMAGES__/logo.png" alt=""> -->
|
||||
</div>
|
||||
</a>
|
||||
<!-- 轮播核心容器 -->
|
||||
@@ -224,6 +224,7 @@
|
||||
</video>
|
||||
</div>
|
||||
{/notempty}
|
||||
|
||||
</div>
|
||||
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||||
{notempty name="dc_second_section"}
|
||||
@@ -337,7 +338,7 @@
|
||||
{/neq}
|
||||
{/volist}
|
||||
{notempty name="ct_more_section"}
|
||||
<a href="{$ct_more_section.link}" class="more">
|
||||
<a href="{$ct_more_section.link}" class="more" style="padding: clamp(1.5rem, 3vw, 3rem) 0">
|
||||
<div class="more-img">
|
||||
查看更多
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user