【问题标题】:HTML 5 video custom controlsHTML 5 视频自定义控件
【发布时间】:2011-01-07 14:51:53
【问题描述】:

与许多网络开发人员一样,我期待使用新的 HTML 5 <video> 标记的流式视频。浏览器支持肯定还不够广泛,所以必须使用Flash/SWF fallback

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

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

自定义和标准化跨浏览器的控件,甚至匹配旧浏览器使用的 Flash 控件,真是太棒了。

【问题讨论】:

    标签: video html


    【解决方案1】:

    在 HTML5 规范中,controls attribute 用于 <video>

    还可以查看这篇文章:Video on the Web - Dive into HTML5。它解释了:

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

    如果您不想构建自己的界面,可以告诉浏览器显示一组内置控件。为此,只需在标签中包含 controls 属性即可。

    【讨论】:

    • 属性链接=找不到文档。
    【解决方案2】:

    YouTube 目前正在运行 HTML5 测试版。您可以通过访问http://www.youtube.com/html5 激活它。目前,激活测试版后,并非所有视频都以 HTML5 显示。以 HTML5 显示的视频会获得不同的加载动画,以便您识别它们(例如 http://www.youtube.com/watch?v=KT1wdjlbyFc)。

    如您所见,他们的视频播放器看起来与 Flash 版本相同。

    【讨论】:

    • 他们“获得了一个小按钮,以便您识别他们”?在哪里?你说的是加载动画吗?
    【解决方案3】:

    对于那些对出色的跨浏览器 HTML5 视频播放器感兴趣的人,请查看 Vimeo (http://vimeo.com) 正在做什么。使用支持 HTML5 的浏览器(至少支持 Safari、Chrome 和 IE9)访问任何视频,然后选择“切换到 HTML5 播放器”。

    他们已经实现了完全复制 Flash 播放器外观的自定义 HTML 控件。这些控件在不同浏览器中看起来都是一样的。

    迄今为止我见过的最好的跨浏览器实现。他们甚至使用<canvas> 元素为音量选择器设置动画。

    【讨论】:

      【解决方案4】:

      我的猜测是控件的外观取决于浏览器(因此不是很可定制)。您可以通过将测试页提交到Litmus 来查看您的测试页在所有浏览器中的样子。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-12-26
        • 2011-11-30
        • 1970-01-01
        • 2016-10-06
        • 1970-01-01
        • 1970-01-01
        • 2011-12-02
        • 1970-01-01
        相关资源
        最近更新 更多