像许多Web开发人员,我期待着视频流利用新的HTML 5 <video>
标签。浏览器支持是绝对不够宽还,所以使用Flash/SWF fallback是必须的。
这让我思考:在Flash中有可能高度自定义HTML 5播放控件(暂停,播放,停止,搜索,音量等等)?哪些选项有自定义视频控件的标志符号,图标和颜色?是否需要使用Javascript?例如下面的页面呈现根据浏览器不同的控制 - 使用FF3.5,Chrome和Safari浏览器进行测试:
http://henriksjokvist.net/examples/html5-video/
这将是真正真棒定制和跨浏览器的标准化控制,甚至匹配旧的浏览器使用的闪光控制。
在HTML5规范,对controls
一个attribute <video>
。
另外,请查阅这篇文章:Video on the Web - Dive into HTML5。它说明:
默认情况下,该元素不会暴露任何类型的播放器控制的。你可以用普通的旧的HTML,CSS和JavaScript创建自己的控件。该元素具有像play()和pause()方法和读/写特性称为currentTime的。也有读/写卷和静音性能。所以,你真的有你需要建立自己的界面一切。
如果你不想建立自己的界面,你可以告诉浏览器显示内置一套控制。要做到这一点,仅仅包括控制在你的标签属性。
YouTube目前运行的HTML5测试版。您可以通过访问http://www.youtube.com/html5激活它。目前,并不是所有的影片都激活公测后显示在HTML5。在HTML5中显示的视频得到了不同的加载动画,以便您可以识别它们(像这样的http://www.youtube.com/watch?v=KT1wdjlbyFc)。
正如你可以看到他们的视频播放器只是看起来一样的flash版本。
对于那些有兴趣在一个伟大的跨浏览器的HTML5视频播放器,退房什么的Vimeo(http://vimeo.com)在做什么。访问任何视频与支持HTML5的浏览器(至少有Safari浏览器,Chrome和IE9的作品),并选择“切换到HTML5播放器。”
他们已经实现的自定义HTML控件,完全复制他们的Flash播放器的外观和感觉。控件的外观跨浏览器相同。
最好的跨浏览器实现我见过的更新。他们甚至用<canvas>
元素进行动画处理的音量选择。
我的猜测是,该控件的外观是依赖于浏览器(因此不是很定制)。你可以看到你的测试页面的样子在所有的浏览器通过其提交到Litmus。
下面是关于如何使自己的自定义控制一个不错的文章。 https://sproutvideo.com/blog/quick-and-dirty-custom-player-using-jquery-ui.html
代码看起来死的简单:
<body>
<div class="player">
<div class="video">
<iframe class='sproutvideo-player' type='text/html' src='https://videos.sproutvideo.com/embed/709adcb31f19e5c6f8/cd8cf2e796aa69d3?noBigPlay=true&showcontrols=false' width='100%' height='100%' frameborder='0'></iframe>
</div>
<div class="toolbar">
<div class="control play-pause"><a href="#"><i class="icon-play"></i></a></div>
<div class="progress-container">
<div class="progress"></div>
</div>
<div class="control fullscreen"><a href="#"><i class="icon-fullscreen"></i></a></div>
<div class="control volume"><a href="#"><i class="icon-volume-up"></i></a></div>
</div>
</div>
</body>