document.addEventListener('DOMContentLoaded', () => { const videoItems = document.querySelectorAll('.video-item'); const modal = document.getElementById('videoModal'); const modalIframe = modal.querySelector('#modalVideo'); const modalTitle = modal.querySelector('.modal-video-title'); const modalCloseBtn = modal.querySelector('.video-modal-close'); // 鼠标悬停自动播放，离开暂停 videoItems.forEach(item => { const iframe = item.querySelector('iframe'); const videoId = item.getAttribute('data-video-id'); // 监听鼠标进入，播放视频 item.addEventListener('mouseenter', () => { iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&autoplay=1&mute=1&controls=0&rel=0&showinfo=0&loop=1&playlist=${videoId}`; }); // 鼠标离开，停止播放，恢复静态缩略图 item.addEventListener('mouseleave', () => { iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&mute=1&controls=0&rel=0&showinfo=0`; }); // 支持键盘回车键打开视频 item.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); item.click(); } }); }); // 关闭弹窗 modalCloseBtn.addEventListener('click', () => { modal.setAttribute('aria-hidden', 'true'); modalIframe.src = ''; document.body.style.overflow = ''; }); // 点击弹窗背景关闭 modal.addEventListener('click', e => { if (e.target === modal) { modalCloseBtn.click(); } }); // ESC键关闭弹窗 document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') { modalCloseBtn.click(); } }); });
Linha de produção fixa
Uma empresa tecnológica nascida na era da mudança, agora quer trazer tecnologia para o mundo, que o mundo veja o crescimento desta empresa
document.addEventListener('DOMContentLoaded', () => { const videoItems = document.querySelectorAll('.video-item'); const modal = document.getElementById('videoModal'); const modalIframe = modal.querySelector('#modalVideo'); const modalTitle = modal.querySelector('.modal-video-title'); const modalCloseBtn = modal.querySelector('.video-modal-close'); // 鼠标悬停自动播放，离开暂停 videoItems.forEach(item => { const iframe = item.querySelector('iframe'); const videoId = item.getAttribute('data-video-id'); // 监听鼠标进入，播放视频 item.addEventListener('mouseenter', () => { iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&autoplay=1&mute=1&controls=0&rel=0&showinfo=0&loop=1&playlist=${videoId}`; }); // 鼠标离开，停止播放，恢复静态缩略图 item.addEventListener('mouseleave', () => { iframe.src = `https://www.youtube.com/embed/${videoId}?enablejsapi=1&mute=1&controls=0&rel=0&showinfo=0`; }); // 支持键盘回车键打开视频 item.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); item.click(); } }); }); // 关闭弹窗 modalCloseBtn.addEventListener('click', () => { modal.setAttribute('aria-hidden', 'true'); modalIframe.src = ''; document.body.style.overflow = ''; }); // 点击弹窗背景关闭 modal.addEventListener('click', e => { if (e.target === modal) { modalCloseBtn.click(); } }); // ESC键关闭弹窗 document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') { modalCloseBtn.click(); } }); });