自定义HTML视频控件：精确控制键盘快进/快退行为

本教程详细讲解如何自定义HTML `

理解HTML视频元素的默认键盘行为

HTML

当开发者尝试通过JavaScript的 keydown 事件来覆盖这种默认行为时，常见的做法是捕获 ArrowLeft 或 ArrowRight 键，然后修改视频的 currentTime 属性，并调用 event.preventDefault() 来阻止浏览器执行其默认操作。然而，仅凭 event.preventDefault() 往往不足以完全阻止浏览器的默认视频控制逻辑。

为什么 preventDefault() 不足以完全阻止默认行为？

问题的核心在于JavaScript事件模型中的“事件传播”（Event Propagation）机制。当一个事件（如 keydown）在DOM元素上触发时，它会经历捕获阶段、目标阶段和冒泡阶段。

立即学习“前端免费学习笔记（深入）”；

• event.preventDefault() 的作用是阻止与事件关联的默认操作。例如，点击链接的默认操作是导航到URL，提交表单的默认操作是刷新页面，而对于视频元素，箭头键的默认操作是按比例快进/快退。
• 然而，event.preventDefault() 并不会阻止事件继续在DOM树中传播（冒泡）。这意味着，即使你在视频元素上阻止了默认操作，该 keydown 事件仍然会冒泡到其父元素，乃至 document 或 window 对象。如果浏览器在更高层级上监听了这些事件并有自己的默认处理逻辑（对于HTML5视频元素，浏览器通常有这样的内置处理），那么即使你阻止了元素层面的默认操作，浏览器可能仍然会执行其自身的视频控制逻辑。

因此，当你的自定义代码将视频快进了5秒，而浏览器又将视频快进了默认的144秒时，结果就是两者叠加，视频总共快进了149秒。

标签： javascript java html js html5 浏览器 事件冒泡 switch win 区别 表单提交 为什