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

3 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.

  3. Pret Hotel Bucuresti

    Attractive component of content. I simply stumbled upon your web site and
    in accession capital to assert that I acquire actually loved account your blog posts.
    Anyway I’ll be subscribing in your feeds and even I
    success you get right of entry to persistently quickly.

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>