Question

我需要添加视频播放器才能在网页上播放视频。通常我在swfobject库的帮助下使用Flash播放器。如果启用了Flash播放器和javascript，则可以正常工作。

我目前正在使用XHTML 1.0严格的doctype。

我的问题是我可以将我的doctype更改为HTML 5 doctype并使用HTML 5视频添加视频播放器。对于不支持HTML5的浏览器，我可以使用javascript。

在支持的浏览器中处于这种状态视频将在没有Flash播放器和javascript的情况下工作，并且在不支持的浏览器中将支持js。

这可能吗？这是个好主意吗？

Answer 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上很喜欢这篇文章。

Answer 2

首先，您可能需要查看http://camendesign.com/code/video_for_everybody 如果你还没有遇到它。

无论如何，如果您想提供自定义闪存选项，这应该可以使用：

<video width="..." height="..." 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 width="..." height="..." 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视频，如果你不想支付大量的带宽，你可能更喜欢向拥有闪存的所有人显示youtube视频，并且只返回html5如果那是无法使用。那看起来像这样：

<object type="application/x-shockwave-flash" width="..." height="..." data="...">
    <param name="movie" value="..." />
    <video width="..." height="...">
        <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中复制嵌入代码并在里面输入html5视频，你需要修改它，使它看起来像上面那样（数据和电影属性都指定了swf文件的来源，没有嵌入标签需要！）。

Flash视频播放器VS HTML 5视频

2 个答案: