HTML5视频和降级？

我一直在玩弄HTML5视频标签，并且当您无法支持编解码器时，我对如何最好地降级感到困惑？HTML5视频和降级？

对于旧的浏览器（或IE）不支持视频标记的这一切很是直截了当：

<video width="320" height="240"> 
    <source src="vid.ogv" type='video/ogg'> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video>

他们都将落空，并会收到Flash版本（或其他替代如一个图像！）

如何当浏览器不支持标签而不是编解码器 - 比如FireFox 3.5 - 并且我不支持OGG（可能是因为我已经拥有大量的H.264档案）：

<video width="320" height="240"> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video>

我在FireFox 3.5中获得的是一个带有x的灰盒子。这对FireFox用户来说并不是一个很好的用户体验！我只能想到使用JavaScript来检查FF3.5并更改DOM！这真的是一个糟糕的老一遍！ ...还是有一部分规格我错过了像'novideo'标签？

来源

2009-12-14 ad rees

重申一下在底部有评论说：如果指定了正确的MIME类型的OGG源Firefox将只回退到Flash视频。 – BumbleB2na 2011-07-15 17:30:35

优雅退化的一个重要组成部分是查询功能......深入研究HTML5是一个很好的阅读...特别是，看看video section。相关代码在这里：

function supports_h264_baseline_video() { 
    if (!supports_video()) { return false; } 
    var v = document.createElement("video"); 
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
}

注：这确实需要DOM检查，但对能力，而不是浏览器的签名。这是正确的事情要做 :-)

一旦你知道浏览器是否可以支持，你可以显示你的视频标签或拉起一个灯箱或重定向，只要你认为合适。

来源

2009-12-15 00:00:09 r00fus

这比检查浏览器签名肯定要好，但它仍然比我从新标准中希望的要多一点JavaScript ...... – 2009-12-15 12:04:05

同意，这很不幸。由于HTML没有分支概念，所以我在这里看不到javascript。现有的非脚本方法依赖于连续兼容性层，但HTML5视频由于编解码器分裂而失败，因为这会对编程语言产生影响。 – r00fus 2009-12-15 17:26:33

请注意，这不适用于Android，它不能正确支持canPlayType方法。 – 2011-03-02 19:19:44

Video for Everybody的test page表示Firefox 3.5只能播放OGG。如果您不想添加OGG，您可能需要添加Flash版本。 VfE也不使用JavaScript，因此可能值得深入研究。要解决这个问题

来源

2010-10-08 10:50:22

VfE仍然需要OGG版本，因为如果您没有OGG版本，Firefox不会默认使用Flash版本或其他任何内容。 – 2010-10-09 17:57:26

一个真正的好方法是使用近代化JS library.Its很容易使用和quick.It可以在用户的浏览器HTML5检查功能。点击这里查看网站：http://www.modernizr.com/

来源

2011-03-27 21:19:18 Jaseem

这肯定是一个很好的解决方案，但我的问题是关于在支持HTML 5的浏览器中使用标记 – 2011-03-30 08:45:55

HTML5视频和降级？

回答

相关问题