本文介绍如何通过封装可复用的插件函数，使同一段 javascript 逻辑同时作用于页面中多个独立的视频容器，避免重复引入脚本或手动为每个元素编写事件监听器。
本文介绍如何通过封装可复用的插件函数，使同一段 javascript 逻辑同时作用于页面中多个独立的视频容器，避免重复引入脚本或手动为每个元素编写事件监听器。
在实际开发中，若需为多个 <video></video> 元素（如产品介绍、技术演示等）统一添加「悬停播放 + 文字提示显隐」交互效果，直接复制多份 <script src="main1.js"></script> 并分别绑定到不同元素上不仅冗余，还易出错——正如原始代码中 document.querySelector() 仅匹配首个 .video-container，导致第二个视频完全无响应。
正确做法是：将逻辑抽象为可复用的插件函数，并批量初始化所有目标容器。
以下是一个轻量、健壮且易于维护的实现方案：
✅ 核心思路：基于容器选择器批量绑定
不再依赖全局唯一选择器（如 .video-container video），而是遍历所有匹配的容器节点（.video-container），对每个容器内部的 <video></video> 和 .hover-text 元素独立绑定事件：
const VideoPlugin = (selector = '.video-container') => {
const addListeners = (container) => {
const video = container.querySelector('video');
const hoverText = container.querySelector('.hover-text');
if (!video || !hoverText) return; // 安全防护：跳过结构不完整的容器
video.addEventListener('mouseenter', () => {
video.play().catch(e => console.warn('Autoplay prevented:', e));
hoverText.classList.add('active');
});
video.addEventListener('mouseleave', () => {
video.pause();
hoverText.classList.remove('active');
});
};
document.querySelectorAll(selector).forEach(addListeners);
};
✅ HTML 结构优化（简洁、语义清晰）
移除重复的 <script></script> 标签，所有视频容器使用统一结构，确保插件能准确识别：
<div class="main-container">
<div class="video-container">
<video src="honda/honda%20adv.mp4" muted preload="metadata"></video><div class="hover-text"><b>Autoturisme</b></div>
</div>
</div>
<div class="main-container">
<div class="video-container">
<video src="honda/honda%20engine.mp4" muted preload="metadata"></video><div class="hover-text"><b>Motoare</b></div>
</div>
</div>
<!-- 统一执行插件 -->
<script>
VideoPlugin(); // 默认查找所有 .video-container
</script>
⚠️ 关键注意事项：
- 添加
muted属性：现代浏览器普遍禁止自动播放带声音的视频，静音是启用video.play()的必要条件；- 使用
preload="metadata"提升首帧加载体验；video.play()返回 Promise，需.catch()捕获 autoplay 被阻止的异常（如用户未与页面交互）；- 插件应在 DOM 加载完成后执行（推荐将
<script></script>放在
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
