2

我需要添加一个视频播放器来播放网页上的视频。通常我在 swfobject 库的帮助下使用 Flash 播放器。如果启用了 Flash 播放器和 javascript，则该方法有效。

我目前正在使用 XHTML 1.0 严格的文档类型。

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

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

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

4

2 回答 2

2

“HTML5”（在使用 HTML5 时，我将迄今为止主要浏览器供应商的实现混为一谈）还没有一致认可的编解码器<video>，因此不同的浏览器使用不同的编解码器；有些是专有的，有些不是。您可以使用 HTML5 doctype 并使用<video>now，但如果以上都不是，您需要为 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。

于 2010-06-12T10:17:09.840 回答
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 视频显示给所有拥有 flash 的人，并且只有在不可用时才回退到 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 复制嵌入代码并在其中 smush html5 视频，您需要对其进行修改，使其看起来像上面那样（数据和电影属性都指定了 swf 文件的来源，不需要嵌入标签！ ）。

于 2010-07-08T11:07:12.240 回答