自定义video控件

Posted 2023-03-04

参考技术A 自定义您的媒体播放器

您可能决定希望音频或视频播放器在浏览器中具有一致的外观，或者只是希望对其进行调整以匹配您的站点。实现此目的的一般技术是省略该controls属性以便不显示默认浏览器控件，使用 html 和 CSS 创建自定义控件，然后使用 javascript 将您的控件链接到音频/视频 API。

如果您需要额外的东西，可以添加默认播放器中当前不存在的功能，例如播放速率、质量流切换甚至音频频谱。您还可以选择如何让您的播放器响应——例如，您可以在某些情况下删除进度条。

您可以检测点击、触摸和/或键盘事件来触发播放、暂停和滑动等操作。为了用户的方便和可访问性，记住键盘控件通常很重要。

一个简单的例子——首先在 HTML 中设置你的音频和自定义控件：

一个简单的例子——首先在 HTML 中设置你的音频和自定义控件：

复制到剪贴板

添加一些 JavaScript 来检测播放和暂停音频的事件：