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

问题描述

像许多Web开发人员一样，我期待使用新的HTML 5 < video> 标签的流式视频。浏览器支持绝对不够宽，所以使用 Flash / SWF fallback 是必须的。

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

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

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

解决方案

在HTML5规范中，有一个控件 属性为< video> 。

另请参阅这篇文章：网络视频 - 潜水到HTML5 。它解释了：

默认情况下，该元素不会公开任何类型的播放器控件。您可以使用普通的旧HTML，CSS和JavaScript创建自己的控件。该元素具有像play（）和pause（）这样的方法和一个名为currentTime的读/写属性。还有读/写音量和静音属性。所以你真的拥有了构建自己的界面所需的一切。

如果你不想构建自己的界面，你可以告诉浏览器显示一个内置的界面，在一组控件中。要做到这一点，只需在您的代码中加入controls属性即可。

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.

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/

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

解决方案

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

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

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屋！