自定义html5视频播放器的controls元素中的按钮

Question

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

我熟悉如何使用javascript使其工作的理论-并构造了一些按钮，这些按钮与播放器是分开的，当我将其全屏显示时看不到它们，这些按钮的确有点bug。 为了清楚起见，我在视频下方有带有jQuery脚本的<button>元素，但未附加到该元素。

有没有一种方法可以将这些按钮注入html5 <video>标签的controls元素中，以便它们持久存在，并且用户可以在全屏模式下欣赏这些按钮的使用。

或作为附录-是否有人知道如何确定脚本以进行快进等，它们似乎在暂停视频时不能很好地播放-控件和html5视频播放器的本机暂停功能是否存在已知的兼容性问题，如果不是这样的话，仅仅意味着我的代码可能很crap 。

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

至于快进，video元素具有一个不错的播放率属性 。 如果您确定控件正确实现了该方法，则可以。