HTML 5 视频自定义控件 [英] HTML 5 video custom controls

问题描述

像许多 Web 开发人员一样，我期待使用新的 HTML 5 标签流式传输视频.浏览器支持肯定还不够广泛，所以使用 Flash/SWF 回退 是必须的.

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 fallback is a must.

这让我想到:在 Flash 中可以高度自定义 HTML 5 中的播放控件(暂停、播放、停止、搜索、音量等)吗?.有哪些选项可以自定义视频控件的字形、图标和颜色?是否需要 Javascript?例如，以下页面根据浏览器呈现不同的控件 - 使用 FF3.5、Chrome 和 Safari 进行测试:

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:

http://henriksjokvist.net/examples/html5-video/

跨浏览器自定义和标准化控件，甚至匹配旧浏览器使用的 Flash 控件，真的很棒.

It would be really awesome to customize and standardize controls across browsers and even match the Flash controls used by older browsers.

推荐答案

在 HTML5 规范中，有一个 controls 属性 .

In the HTML5 spec, there is a controls attribute for <video>.

另请查看这篇文章:网络视频 - 深入了解 HTML5.它解释说:

Also check out this article: Video on the Web - Dive into HTML5. It explains:

默认情况下，该元素不会公开任何类型的播放器控件.您可以使用普通的旧 HTML、CSS 和 JavaScript 创建自己的控件.该元素具有诸如 play() 和 pause() 之类的方法以及名为 currentTime 的读/写属性.还有读/写音量和静音属性.因此，您确实拥有构建自己的界面所需的一切.

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 5 视频自定义控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！