Modernizr vs W3Schools推荐视频后备

时间:2013-06-25 14:47:47

标签: html5 video modernizr fallback

我们正在为视频寻找可靠的后备解决方案。我们希望为将在移动设备上访问应用程序的客户在HTML5中创建一个应用程序,但我们也知道我们的政府客户中有相当一部分将使用较旧的桌面浏览器而无法升级它们。

我一直在关注 Modernizr 适合所有人的视频解决方案,然后我遇到了W3Schools的推荐,其中包含:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
    <object data="movie.mp4" width="320" height="240">
      <embed src="movie.swf" width="320" height="240">
    </object> 
  </video>

对于视频回退,使用Modernizr或Video for Everybody对简单的W3Schools建议有什么好处吗?

1 个答案:

答案 0 :(得分:1)

我估计你找到了你的例子here

首先,我只想澄清一些事情: W3Schools与W3C无任何关系。此外,HTML5目前是候选推荐,并且在一段时间之前不会被视为 W3C推荐,因为向建议推荐<的过渡< / em>预计不早于2014年9月1日。

据我所知,W3C没有提供推荐的嵌入视频的方式,因为浏览器选择了编解码器,规范往往与实现细节无关。此外,如果浏览器更新其编解码器支持,W3C将不得不更改其规范,幸运的是,这不会发生。

现在,要回答您的问题,如果您查看code given by Video for Everybody(也是Modernizr's recommended way of embedding videos),您会看到:

<video width="640" height="360" controls>
  <source src="__VIDEO__.MP4"  type="video/mp4" />
  <source src="__VIDEO__.OGV"  type="video/ogg" />
  <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
    <param name="movie" value="__FLASH__.SWF" />
    <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
  </object>
</video>

正如您所看到的,它与您提供的示例非常接近。我们可以注意到的最大区别是缺少WebM,但是当您查看browser support视频格式时,我认为可以解释为:

  • 如果浏览器支持WebM,它还支持Theora(代码段的OGG行)和/或H.264
  • 在WebM之前支持Theora / H.264,因此即使旧的浏览器版本也会播放您的视频
  • 在一个实用的笔记上......它减少了一个文件要维护(即,如果视频内容发生变化,所需的磁盘存储空间减少,浪费的时间减少,......)

另外,这来自前两个注释,如果您的浏览器不支持Theora或H.264,并且您希望最大限度地提高兼容性,那么您最好依赖Flash支持而不是WebM支持(根据您有Flash)安装)。

您(或对该主题感兴趣的任何人)可能希望遇到的一些链接:

我希望这会有所帮助。


对于那些喜欢浪费时间观看科幻小说的人,您可能希望查看some easter eggs的HTML5规范......: - )