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

customising the buttons availabe in the controls element of the html5 video player

本文关键字：按钮元素 html5 视频播放器控件自定义更新时间：2023-09-26

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

我熟悉如何使用javascript使它们工作的理论，并构建了一些与播放器分离的按钮，这些按钮在我使其全屏显示时看不到。为了清晰起见，我有<button>元素和jquery脚本，它们位于视频下面，但没有附加到视频上

有没有办法将这些按钮注入到html5<video>标签的controls元素中，以便它们持久存在，用户可以在全屏状态下享受这些按钮的使用。

或者作为一个附录——有人知道如何确定快速转发等的脚本吗，他们似乎在暂停视频方面做得不太好——javascript和html5视频播放器的控件原生暂停功能是否存在已知的兼容性问题，如果不是，这只意味着我的代码可能是crap。

据我所知，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，并且使用与构建自己的版本相同的方法。

至于快进，视频元素有一个播放率属性，效果非常好。如果你确保你的控件正确地实现了这个方法，你会没事的。