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(); } }); });
Trạm nghiền di động
Một công ty công nghệ sinh ra trong kỷ nguyên thay đổi, giờ đây muốn đưa công nghệ ra thế giới, để thế giới thấy sự phát triển của công ty này
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(); } }); });