为什么不能有效地使用HTML5视频的元素,即使在浏览器的支持吗

(2009年12月22日更新:在本文的原始版本,我错误地报道,Firefox auto-buffers HTML5视频内容在默认情况下,Safari和Chrome一样它不,如图所示克里斯托弗·暴雪的简单的测试我后悔的错误,并相应地修改文章For posterity, the源的原始版本保存在这里您可以创建一个精确的列表通过差异与变化源为当前的修订)

我很少视频DF,但是当我做的,我拒绝嵌入Flash,1我希望理智的和标准的标记,我想要的视频在受欢迎的符合标准的web浏览器,和我不想视频下载/自动缓冲。这是一年前的一个例子,使用QuickTime。

你所看到的在页面加载海报架(一个静态图像),然后(用户)点击海报框架来下载和观看视频这是我使用的标记:

<embed
   width="320" height="256"
   type="video/quicktime"
   pluginspage="http://www.apple.com/quicktime/download/"
   src="dtk-panic-1-poster.jpg"
   href="dtk-panic-1.mov"
   target="myself"
   controller="false"
   autoplay="false"
   scale="aspect"
/>

标记了所有我提到的欲望但一:<嵌入>标签不是标准的更糟糕的是,现在有一个新的重大问题:它不工作在Chrome(至少在Mac上)。

所以我一直关注到新<视频>HTML5元素螺母,它试图使在web页面中嵌入的视频一样容易markup-wise嵌入的图像< img >标签(同样的音频与新<音频>元素)。

最明显的缺点完全依赖<视频>元素嵌入网络视频,因为它是新的,唯一的支持是最近版本的Safari浏览器,Firefox和Chrome这不是的事情之一就是不工作在IE6或IE7——即它不工作因此一些网站现在在生产使用HTML5视频,和其中,几乎所有人都是这样做的回退的标记的,经常显著的复杂性,介绍了视频使用其他浏览器的Flash playerBecause (a) I don’t post much video; (b) the overwhelming majority of DF’s audience is in fact using an HTML5-compatible version of Safari, Firefox, or Chrome;2我愿意和(c)是一个迪克about this; I do not care about fallbacks for browsers that don’t support<视频>

我想做的就是使用<视频>,有两个源元素——MP4和OGV——中指定的跨浏览器的原因Mark Pilgrim很好章视频在他正在进行的HTML5的书(短版:Safari和MobileSafari仅支持MP4,Firefox支持只有OGV,Chrome支持MP4和OGV)。3.

所以我决定尝试这个上周视频视频我创建了说明我的在PastryKit我试着这样的标记:

<video height="475"  width="407"  controls  poster="iphoneguide-mac.png">
   <source src="iphoneguide-mac.mp4" type="video/mp4" />
   <source src="iphoneguide-mac.ogv" type="video/ogg" />
</video>

好消息是:上面的标记结果的视频,在Safari,Chrome,Firefox这也完全在MobileSafari iPhone操作系统工作Firefox Safari和Chrome播放MP4视频,OGV(Chrome支持两种格式,列出的第一个I want it to play the MP4 version because the video and audio are of noticeably superior quality.) That is the entirety of the necessary markup; if you’re unfamiliar with the sort of nasty markup typically used to embed video, try a little View Source on a few web pages that embed video.

坏消息:在两三个浏览器(Safari 4.0.4和Chrome 4.0.249.43),通过以上简单的标记,视频内容缓冲区自动在页面加载我的意思是,只要你加载网页,浏览器下载实际的嵌入式视频文件正如一开始提到的,我不希望这样相反,在页面加载,我只希望浏览器渲染海报形象,加载视频只有在用户点击开始播放。

HTML5规范定义了一个autobuffer视频和其他媒体的属性元素(bold emphasis added):

autobuffer属性是一个布尔属性Its presence hints to the user agent that the author believes that the media element will likely be used, even though the element does not have an播放属性(The attribute has no effect if used in conjunction with the播放attribute, though including both is not an error.)这个属性可以被完全忽略。

Firefox的荣誉autobuffer属性省略的属性标记,视频内容不会auto-buffer Firefox包括它,和它将。

但是唉,在我的测试中,Safari和Chrome的规范在aforebolded提供忽略该属性即使你没有明确打开这个属性,Safari和Chrome仍auto-buffer内容给你<视频>(和<音频>)元素没有办法抑制使用HTML标记。

你可能会想,“嘿,但默认auto-buffering听起来像一个好功能,因为这样用户就不必等待只要准备播放的视频。“我认为这种想法是Safari和Chrome团队领导。

但这个浏览器的行为是非常不可取的出版商和用户共同的上下文用户页面加载缓慢的连接,或pay-by-the-megabyte计量连接(与无线网络),不应该被迫下载一个潜在的大视频每次加载页面同样,出版商不应该被迫支付带宽来传输视频,不会看。

尤其是认为,出版的本质嵌入式视频博客我,包含嵌入式视频发布者,发布一个条目这个帖子可能仍然在我的主页上一个星期普通读者可能加载主页数十次期间视频出现在页面上auto-buffering,他们会下载完整的视频每次加载页面本地缓存,可以缓解,但频繁的网站高流量和/或嵌入视频,区别是巨大的。

这就是为什么嵌入式视频在YouTube,Vimeo,所有类似的服务click-to-load基础上工作Auto-buffering很好作为一个可选属性,但对于许多(最)环境中,click-to-load行为至关重要。

但就我所见,没有办法click-to-load使用只是一个视频在Safari和Chrome<视频>元素我能想到的唯一解决方法就是这样的:

  1. 在HTML标记,而不是一个<视频>元素,而不是使用一个< img >元素的海报。
  2. 添加一个onclickJavaScript处理程序< img >DOM元素,它调用时,做一些欺骗just-clicked-upon删除< img >元素和替换它<视频>元素来源的视频文件。

事实上,这正是我采取PastryKit视频做一个查看源代码这个页面查看解决方案了干净just-as-easy-to-include-a-video-as-an-image标记(我的真诚的感谢Faruk Ateş保罗爱尔兰帮助欺骗实现。)

这WebKit的缺陷申请在4月表明我不是第一个发现这个缺点这是关于<音频>而不是<视频>,但原则是完全相同的和这个bug报告中引用的例子似乎是一个完美的场景,每个人都应该同意媒体内容不应自动缓冲:播客的档案页面<音频>元素为每个以前的事件。

一个大的吸引力的一部分<视频><音频>元素是,他们应该更容易使用目前,这些元素是不能用在流行上下文没有采取有效关闭auto-buffering JavaScript DOM操作。

我认为HTML5规范应该改变这样的价值autobuffer属性必须得到尊重即使规范并不是改变,web浏览器不应该选择忽略它Web浏览器应该只缓冲HTML5媒体内容时autobuffer播放属性被显式地标记的打开。


  1. 至于为什么我拒绝嵌入Flash,让我这么说吧我使用和强烈推荐ClickToFlash块在缺省情况下,所有的Flash内容Why would I publish content using a technology that I personally block by default? I truly hope to see Flash fade as the de facto standard for embedded web video, and I’m willing to put my markup where my mouth is. ↩︎

  2. 在撰写本文时,万博manbetx贴吧从MobileSafari约两倍的页面浏览量所有版本的Internet Explorer结合在一个典型的工作日。↩︎

  3. 必须包括单独的源元素相同的视频内容编码在两个不同的格式实际上是一种不便Not so much the extra markup as the extra work producing and encoding the second video file甚至短视频我创建了说明我PastryKit每个编码块花了几分钟相对于今天大多数计算任务,已经缓慢编码视频一次编码两次是一个水槽没人需要的时间但这是它的方式。↩︎

前一: 更多关于PastryKit
下一个: 平板电脑