自定义 html5 视频播放器的控件元素中可用的按钮

Posted 2023-02-25

【中文标题】自定义 html5 视频播放器的控件元素中可用的按钮

【英文标题】：customising the buttons availabe in the controls element of the html5 video player

【发布时间】：2014-11-11 23:39:03

【问题描述】：

我正在尝试制作一个带有快进、快退、暂停和前进一帧按钮的视频播放器。

我熟悉如何使用 javascript 使它们工作的理论 - 并且已经构建了一些与播放器分开且在全屏时无法看到的按钮，尽管它们确实有点错误。 为清楚起见，我有 <button> 带有 jquery 脚本的元素，它们位于视频下方但未附加到它。

有没有办法将这些按钮注入到 html5 的 <video> 标记的 controls 元素中，以便它们持续存在并且用户可以在全屏时享受这些按钮的使用。

或者作为附录 - 是否有人知道如何确定用于快进等的脚本，它们似乎在暂停视频时表现不佳 - 是否存在与 javascript 和 html5 视频播放器的本机暂停功能的已知兼容性问题从控件，如果不是这只是意味着我的代码可能是crap。

【参考方案1】：

据我所知，HTML5 视频播放器控件不能直接设置样式。

我找到的解决方案要求您包含自定义控件并禁用默认控件：

http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683

我还认为，与在加载后尝试注入新按钮相比，完全替换默认控件会为您提供更大的控制权和更高的稳定性。使用标准控件没有任何好处，它们是纯 HTML、CSS 和 javascript，并且使用与构建自己的版本相同的方法。

至于快进，视频元素有一个playbackrate attribute，效果非常好。如果您确保您的控件正确实施该方法，那么您应该没问题。

【讨论】：

所以没有办法只添加我需要的额外内容？有点令人失望。更多样板代码要编写和测试，好-o！

从好的方面来说，我链接的教程应该为您提供一套完整的新控件以供您使用和设置样式。给它时间，视频控件可能会成为每个样板的一部分，但现在它太新了。