HTML 5 视频自定义控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2107354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 video custom controls
提问by leepowers
Like many web developers I'm looking forward to streaming video that utilizes the new HTML 5 <video>tag. Browser support definitely isn't wide enough yet, so using a Flash/SWF fallbackis a must.
像许多 Web 开发人员一样，我期待使用新的 HTML 5<video>标签流式传输视频。浏览器支持肯定还不够广泛，因此必须使用Flash/SWF 回退。
This got me thinking: in Flash it's possible to highly customize the playback controls (pause, play, stop, seek, volume, etc.) in HTML 5?. What options are there for customizing the glyphs, icons and colors of video controls? Is Javascript required? For instance the following page renders different controls depending on the browser - tested using FF3.5, Chrome and Safari:
这让我想到：在 Flash 中可以高度自定义 HTML 5 中的播放控件（暂停、播放、停止、搜索、音量等）吗？。有哪些选项可以自定义视频控件的字形、图标和颜色？是否需要 Javascript？例如，以下页面根据浏览器呈现不同的控件 - 使用 FF3.5、Chrome 和 Safari 进行测试：
http://henriksjokvist.net/examples/html5-video/
http://henriksjokvist.net/examples/html5-video/
It would be really awesome to customize and standardize controls across browsers and even match the Flash controls used by older browsers.
跨浏览器自定义和标准化控件，甚至匹配旧浏览器使用的 Flash 控件，这真的很棒。
回答by Philip Morton
In the HTML5 spec, there is a controlsattributefor <video>.
在HTML5规范，是有controls属性的<video>。
Also check out this article: Video on the Web - Dive into HTML5. It explains:
另请查看这篇文章：Web 上的视频 - 深入了解 HTML5。它解释说：
By default, the element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.
If you don't want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your tag.
默认情况下，该元素不会公开任何类型的播放器控件。您可以使用普通的旧 HTML、CSS 和 JavaScript 创建自己的控件。该元素具有诸如 play() 和 pause() 之类的方法以及名为 currentTime 的读/写属性。还有读/写音量和静音属性。因此，您确实拥有构建自己的界面所需的一切。
如果您不想构建自己的界面，可以告诉浏览器显示一组内置控件。为此，只需在标签中包含控件属性。
回答by Flatlin3
YouTube is currently running a HTML5 beta. You can activate it by visiting http://www.youtube.com/html5. Currently not all Videos are displayed in HTML5 after activating the beta. Videos displayed in HTML5 get a different loading animation so you can identify them (like this one http://www.youtube.com/watch?v=KT1wdjlbyFc).
YouTube 目前正在运行 HTML5 测试版。您可以通过访问http://www.youtube.com/html5来激活它。目前，在激活测试版后，并非所有视频都以 HTML5 格式显示。在 HTML5 中显示的视频会获得不同的加载动画，因此您可以识别它们（例如http://www.youtube.com/watch?v=KT1wdjlbyFc）。
As you can see their video player just looks the same as the flash version.
正如您所看到的，他们的视频播放器看起来与 Flash 版本相同。
回答by Todd
For those interested in a great cross-browser HTML5 video player, check-out what Vimeo (http://vimeo.com) is doing. Visit any video with an HTML5-capable browser (works with at least Safari, Chrome, and IE9) and choose to "Switch to HTML5 Player."
对于那些对出色的跨浏览器 HTML5 视频播放器感兴趣的人，请查看 Vimeo ( http://vimeo.com) 正在做什么。使用支持 HTML5 的浏览器（至少适用于 Safari、Chrome 和 IE9）访问任何视频，然后选择“切换到 HTML5 播放器”。
They've implemented custom HTML controls that fully replicate their Flash-player look-and-feel. The controls look identical across browsers.
他们已经实现了完全复制其 Flash 播放器外观和感觉的自定义 HTML 控件。这些控件在浏览器中看起来相同。
Best cross-browser implementation I've seen to-date. They even use a <canvas>element to animate the volume selector.
迄今为止我见过的最好的跨浏览器实现。他们甚至使用一个<canvas>元素来为音量选择器设置动画。
