UD5工具箱
Bookmarklet（小书签）
Bookmarklet 是一种存储在浏览器书签中的微型 JavaScript 程序。与普通书签保存网址不同，小书签的地址字段存储的是一段以 javascript: 开头的代码。当用户点击这个书签时，浏览器会在当前页面的上下文中执行这段代码。小书签的优势在于无需安装浏览器扩展，跨浏览器兼容性好，代码完全透明可审查，用户可以随时查看和修改。本工具正是利用这一技术，将视频速度控制功能以小书签的形式提供给用户。
playbackRate（播放速率）
playbackRate 是 HTML5 video 元素的一个核心属性，用于控制视频的播放速度。其值为浮点数，1.0 表示正常速度，小于 1.0 为慢放，大于 1.0 为快放。HTML5 规范中 playbackRate 的有效范围通常为 0.0625 到 16，超出此范围浏览器可能忽略或限制设置。本工具通过直接操作 video 元素的 playbackRate 属性来实现速度控制，提供了从 0.25 到 16 的完整速度范围，覆盖了从慢放分析到极速浏览的各种使用场景。
preservesPitch（音调保持）
preservesPitch 是 HTML5 video 元素的一个布尔属性，用于控制视频加速播放时是否保持原始音调。当设置为 true 时，浏览器会使用音频处理算法在改变播放速度的同时尽量维持原始音调，避免声音变得尖锐（加速时）或低沉（减速时）。现代浏览器（Chrome、Edge、Firefox）默认开启音调保持功能，所以在 2x 以内的加速播放中，声音仍然可以接受。本工具不会修改 preservesPitch 属性，保留浏览器的默认行为，确保最佳的音频体验。
HTML5 Video 元素
HTML5 Video 是 HTML5 标准中用于嵌入视频的原生元素，使用 video 标签定义。它取代了此前依赖 Flash 等插件的视频播放方案，成为现代网页视频播放的事实标准。HTML5 Video 元素提供了丰富的 JavaScript API，允许开发者通过代码控制播放、暂停、音量、速度等参数。本工具通过 querySelectorAll('video') 选择器检测页面中的所有视频元素，并通过 playbackRate 属性实现速度控制。需要说明的是，并非所有网页视频都使用标准的 HTML5 Video 元素，部分大型平台（如 YouTube、Bilibili）使用自定义播放器方案，可能无法被本工具直接控制。
localStorage（本地存储）
localStorage 是 Web Storage API 的一部分，提供了一种在用户浏览器中持久化存储键值对数据的机制。与 sessionStorage 不同，localStorage 中的数据没有过期时间，即使关闭浏览器或重启设备后仍然保留，直到用户主动清除浏览器数据。本工具使用 localStorage 存储用户的播放速度偏好和面板位置设置，存储空间占用不到 200 字节。通过 localStorage，工具能够在不同网页之间保持用户设置的一致性，提供连贯的使用体验。
DOM 注入
DOM 注入是指通过 JavaScript 动态向网页的文档对象模型（Document Object Model）中添加新的元素或修改现有元素的过程。本工具通过 DOM 注入技术，将视频速度控制面板的 HTML 结构插入到当前页面中。面板的样式使用内联方式设置，确保不受页面原有 CSS 样式的影响。注入的 DOM 元素采用固定定位（position:fixed）和最高层级（z-index:2147483647），保证面板始终显示在页面最上层，不会被其他元素遮挡。
IIFE（立即调用函数表达式）
IIFE 是 Immediately Invoked Function Expression 的缩写，是一种 JavaScript 设计模式，指定义后立即执行的函数。本工具的整体代码结构采用 IIFE 包装，将所有内部变量和函数封装在函数作用域内，避免与页面中已有的 JavaScript 代码发生全局变量冲突。这种封装方式确保了工具的独立性和稳定性，无论在什么网页中运行都不会干扰页面的原有功能。IIFE 是编写 Bookmarklet 的最佳实践之一。
seekable（可寻址范围）
seekable 是 HTML5 video 元素的一个只读属性，返回 TimeRanges 对象，表示视频中可以被定位（seek）的时间范围。对于已完全加载或支持随机访问的点播视频，seekable 通常覆盖从 0 到 duration 的完整范围。但对于直播视频，由于内容尚未录制完成，seekable 范围可能仅限于已缓冲的部分。本工具在执行快进快退操作前会检查视频的 seekable 属性，确保操作在有效范围内执行，避免无效操作或错误。
fixed 定位
CSS 中的 position:fixed 定位方式使元素相对于浏览器视口进行定位，不受页面滚动的影响，始终保持在屏幕的固定位置。本工具的视频速度控制面板采用 fixed 定位，无论用户如何滚动页面，面板始终可见且位置不变。这一设计确保了用户在观看视频时可以随时调节速度，无需反复滚动页面寻找控制面板。fixed 定位是构建浮动 UI 组件的常用方案。
z-index 层级
z-index 是 CSS 中用于控制元素堆叠顺序的属性，值越大显示层级越高。本工具将面板的 z-index 设置为 2147483647（32 位整数最大值），确保面板显示在页面所有元素之上，不会被弹窗、导航栏或其他浮动元素遮挡。这一设置是必要的，因为不同网页的 z-index 值各不相同，使用最大值可以保证面板始终处于最顶层，提供一致的使用体验。
触摸事件（Touch Events）
触摸事件是移动端浏览器提供的用户交互 API，包括 touchstart、touchmove、touchend 等事件类型，用于检测用户在触摸屏上的操作。本工具针对移动端实现了完整的触摸交互支持，包括面板的触摸拖动。在 touchstart 事件中记录初始触摸位置，在 touchmove 事件中实时更新面板位置，在 touchend 事件中保存最终位置。触摸事件处理中使用 passive:false 选项，允许在事件处理函数中调用 preventDefault() 来阻止默认的滚动行为，确保拖动操作的流畅性。