Video for Everybody: 周到的网页内插入视频方法

Tim Bray 的 blog 今天提到这个不错的东西:Video for Everybody

HTML5 Video 与 flash; H.264 与 Theora 正争得口沫横飞,而那些要在页面里嵌入视频的哥们夹在中间恐怕不好过:认清并跟随趋势是必须的,不能得罪现有用户也是必须的。挠头了有点……我的 code 到底是用 video 标签还是 flash 呢?这种情况,用 Video for Everybody 是个不错的选择。

Video for Everybody 是一段 HTML 代码,放入自己的页面即可。这段代码可以让访问者的浏览器选择最合适它们的视频播放方法:有 HTML5 就 video 标签为主,老一点的浏览器则自动用 flash 观看,这样一来,一个都落下。既使用了最新技术,也不用担心访问者看不到视频,很省心。

去掉注释部分,这段代码不算长(官方网站有注释版,更清楚):
<video width="640" height="360" poster="__POSTER__.JPG" controls>
<source src="__VIDEO__.MP4" type="video/mp4"></source>
<source src="__VIDEO__.OGV" type="video/ogg"></source>
<object width="640" height="384" type="application/x-shockwave-flash"
data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">

<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="__POSTER__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

把其中的 __VIDEO__.MP4, __VIDEO__.OGV, __POSTER__.JPG 等等部分换成对应的文件即可。

对支持 HTML5 的浏览器,这段代码使浏览器启用 native HTML5 支持,完全不会引入一星半点的 flash。比如 iPad,其访问测试页面就会如此:

如果访问者浏览器不支持 HTML5,比如是 IE,转而使用 flash,如图:

还有考虑更完备的,如果上述情况 HTML5 和 flash 都不支持,比如有些“洁癖”用户不装 flash 插件,再用不支持 HTML5 的浏览器,那同样这段代码会送出一份 place holder 给浏览器:一张视频截图,截图下有视频的地址,愿意的话,访问者可以下载到本地观看。
注意有一点不同:不像通常的浏览器行为,用户不会被提示去装个 flash 插件,记得 IE, Firefox 和 Chrome 弹出那个黄条条?Video for Everybody 这段代码可不会导致这烦人的提示。

当然,Video for Everybody 提供的是方便的前端方案,前提是有 OGG 和 MP4 文件准备选一个呈现给用户。这段代码和编解码本身无关,并不自动做一段视频的多种编码工作。

Video for Everybody 没有使用 JavaScript,不做浏览器嗅探,无论是什么 RSS reader 或者 iPhone,iPad,支持的浏览器/OS 平台非常广泛。我自己用 Firefox 和 IE8 访问了一下 VfE 的测试页面,工作得很好。

现在 iPhone OS 有个 poster 属性处理的 bug,使用这段代码的时候注意一下就好了。

最后,类似的自动适应代码还有另几个选择,可以参看 speckyboy 的文章 HTML5 video Libraries, Toolkits and Players

2 thoughts on “Video for Everybody: 周到的网页内插入视频方法

  1. Pingback: Tweets that mention Video for Everybody: 周到的网页内插入视频方法 « ResetTarget -- Topsy.com

  2. hello! , Everyone loves the composing very a great deal of! portion all of us be in contact much more about ones content with America online? I would like an experienced in this area to eliminate our dilemma. May very well be that’s you actually! Writing about ahead to see you.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>