Flash 视频播放器 VS HTML 5 视频
Posted
技术标签:
【中文标题】Flash 视频播放器 VS HTML 5 视频【英文标题】：Flash video player VS HTML 5 Video 【发布时间】：2011-03-02 23:28:44 【问题描述】：我需要添加视频播放器才能在网页上播放视频。通常我在 swfobject 库的帮助下使用 Flash 播放器。如果 Flash 播放器和 javascript 都被启用，这将起作用。
我目前使用的是 Xhtml 1.0 严格的文档类型。
我的问题是我可以将我的文档类型更改为 HTML 5 文档类型并使用 HTML 5 视频添加视频播放器。对于不支持 HTML5 的浏览器，我可以使用 javascript。
在这种情况下，在受支持的浏览器中，视频可以在没有 Flash 播放器和 javascript 的情况下工作，而在不受支持的浏览器中，可以在 js 支持下工作。
这可能吗？这是个好主意吗？
【问题讨论】：
您需要通过 javascript 检测用户代理，并在必要时插入视频标签，反之亦然。 【参考方案1】：“HTML5”（在使用 HTML5 时，我将迄今为止主要浏览器供应商的实现混为一谈）还没有针对<video> 达成一致的编解码器，因此不同的浏览器使用不同的编解码器；有些是专有的，有些不是。您现在可以使用 HTML5 文档类型，并使用 <video>，但如果以上都没有，您将需要为 Safari 使用 H.264 编解码器，为 Firefox 使用 Ogg/Theora 和 Flash 作为后备。哦，如果没有安装 Flash，请不要忘记图片，如果图片被禁用，请不要忘记文字，如果...
比如……
<!DOCTYPE html>
...
<video>
<source src='your_movie.ogv' />
<source src='your_movie.m4v' />
</video>
在其他新闻方面，我很喜欢 JW 博客上的这篇名为 Safari and Quicktime are not Standards 的帖子。
【讨论】：
youtube、vimeo 等如何提供 HTML 5 播放器？ 支持 H.264 以及 Opera 和 Firefox 的实验版本：youtube.com/html5 你的意思是在ios设备上观看youtube时自动切换吗？【参考方案2】：首先你可能想看看http://camendesign.com/code/video_for_everybody 如果你还没有遇到过。
无论如何，如果您想提供自定义 Flash 替代方案，这应该可以工作：
<video controls="controls" preload="none">
<source src="video/demo.mp4" type="video/mp4" />
<source src="video/demo.webm" type="video/webm" />
<source src="video/demo.ogv" type="video/ogg" />
<span id="flashAlternative">what, no flash+no html5? crazy!</span>
</video>
<script>
swfobject.embedSWF( ..., "flashAlternative", ... );
</script>
显然，如果您想使用 youtube/vimeo/... 视频作为替代，您只需放置嵌入代码而不是脚本标签：
<video controls="controls" preload="none">
<source src="video/demo.mp4" type="video/mp4" />
<source src="video/demo.webm" type="video/webm" />
<source src="video/demo.ogv" type="video/ogg" />
<!-- embedding code here -->
</video>
这两种解决方案都更喜欢 html5 视频而不是 flash 视频，如果您不想为大量带宽付费，您可能更愿意向所有拥有 flash 的人展示 youtube 视频，并且只有在这种情况下才回退到 html5无法使用。然后看起来像这样：
<object type="application/x-shockwave-flash" data="...">
<param name="movie" value="..." />
<video >
<source src="..." type="video/mp4" />
<source src="..." type="video/webm" />
<source src="..." type="video/ogg" />
<!-- here comes the alternative for people who have neither flash, nor html5 -->
</video>
</object>
请注意，您不能只是从 youtube/video 复制嵌入代码并在其中 smush html5 视频，您需要对其进行修改，使其看起来像上面那样（数据和电影属性都指定了 swf 文件的来源，没有嵌入需要标签！）。
【讨论】：
为了完整性：我只测试了第二个和第三个示例，您可能需要稍微修改 swfobject 示例以使其工作，但您应该明白了！以上是关于Flash 视频播放器 VS HTML 5 视频的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 视频后备 - 无法在本地 Flash 播放器中播放视频文件