本文讲解如何通过封装可复用的插件函数，让同一段 javascript 代码同时控制页面中多个独立的视频容器（如播放/暂停、悬停文字显示），避免重复引入脚本或手动修改选择器。
本文讲解如何通过封装可复用的插件函数，让同一段 javascript 代码同时控制页面中多个独立的视频容器（如播放/暂停、悬停文字显示），避免重复引入脚本或手动修改选择器。
在实际开发中，若为每个视频容器单独引入一份 JS 文件（如 main1.js 和 main2.js），不仅冗余，还难以维护。根本问题在于原始代码使用 document.querySelector()——它仅匹配第一个符合条件的元素，因此第二个 .video-container 完全被忽略。
正确的解法是：将逻辑抽象为一个可复用的初始化函数，并针对所有目标容器批量执行。下面是一个轻量、无依赖的插件式实现：
✅ 推荐方案：封装为通用插件函数
将以下代码统一写入 <script></script> 标签（可内联，也可保存为 video-plugin.js 引入）：
const VideoPlugin = (selector = '.video-container') => {
const addListeners = (videoContainer) => {
const video = videoContainer.querySelector('video');
const hoverText = videoContainer.querySelector('.hover-text');
// 确保视频可播放（处理静音策略等兼容性）
video.muted = true;
video.playsInline = true;
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);
};
// 在 DOM 加载完成后调用（推荐放在 </body> 前）
VideoPlugin();✅ HTML 结构优化（关键！）
确保每个视频容器结构一致，且不预先添加 active 类（由 JS 动态控制）：
立即学习“Java免费学习笔记（深入）”；
<div class="main-container">
<div class="video-container">
<video src="honda/honda adv.mp4" 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 engine.mp4" preload="metadata"></video>
<div class="hover-text"><b>Motoare</b></div>
</div>
</div>? 提示：
preload="metadata"可提升首帧加载速度；muted=true是现代浏览器强制要求（尤其移动端）以支持自动播放。
✅ CSS 注意事项
保持原有样式不变，但建议微调 .hover-text 的初始状态（移除默认 active）：
.video-container .hover-text {
/* ...其他样式保持不变... */
opacity: 0; /* 初始隐藏 */
transition: opacity 0.4s ease, transform 0.4s ease;
}
.video-container .hover-text.active {
opacity: 1;
transform: translate(-50%, -50%);
}⚠️ 常见问题与规避
-
报错
play() failed because the user didn't interact with the document first？→ 添加video.muted = true（已包含在插件中）。 -
多个
<script></script>标签顺序错误？→ 插件定义和调用必须在 HTML 内容之后（推荐放在
