在网页中嵌入视频（HTML）

Question

我想在网页中嵌入视频。
我不想使用Flash，因为它在许多平台上都无法使用。
我不太愿意使用HTML5，因为它还不是很标准（虽然它已经是标准了，但大多数人的浏览器都不支持它）。

还有其他方法吗？还是我应该坚持使用HTML5，并放置一个巨大的横幅告诉人们升级他们的浏览器？

- WhyNotHugo

---

Hugo，我从你的问题中删除了你的“个人”对Flash的看法。你只会被攻击，然后你的问题会被关闭为“主观和争论性”。 - Binary Worrier

重点不是批评它，而是表达“我不想使用它”的意思。 :) - WhyNotHugo

我有同感，花了几年时间才找到解决方案... 这就是它！这不是最好的解决方案... 性能也不是很好... 但它能用！（只是把它作为答案发布在这里） - Charles-Édouard Coste

Answer 1

有几种方法可以将HTML5视频与不支持的浏览器回退相结合。已经演示了一些具体的解决方案。

其中一个例子是由Camen Design制作的Video for Everybody，符合HTML5标准，并使用条件注释来支持IE和嵌套对象标签来支持旧版浏览器。这应该符合标准、向后兼容并具备未来性。

- Michael Zajac

---

哇！这太棒了，我喜欢它！ - WhyNotHugo

Answer 2

HTML 5不是标准，而是一个草案。它有望在未来成为标准，但可能会先发生变化。

如果您想在页面中嵌入视频，那么至少今天，Flash是您可以使用的最受支持的选项。我会提供一个常规可下载版本的链接，作为那些没有Flash（或只想在专用视频播放器中观看视频的人）的人的选择。

告诉人们升级他们的浏览器并不能帮助太多。据我所知，唯一一个稳定版本中支持视频的浏览器是Firefox。Chrome除了在开发版中支持外，其他版本都不支持。我不认为Opera已经发布了带有支持的稳定版本。微软肯定还没有将其添加到Internet Explorer中。至于Safari，我不确定。

如果您真的想避免使用Flash，那么您可以使用HTML 4.01对象。

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

...并希望用户已安装能够处理视频的插件。

- Quentin

---

我从未遇到过这种情况。在这个标签中播放视频的是什么？主流浏览器实际上有一个插件可以使其工作，还是只有5%的人可以做到这一点？ - WhyNotHugo

@Wahnfrieden 你好！欢迎来到2009年。有些事情可能与你以往所习惯的有所不同。http://www.w3.org/TR/html5/video.html#video - Quentin

@David Dorward，没必要挖苦我。我犯了错 - <video>标签没有被删除，但所使用的编解码器不再指定，也会因实现而异。我以为他们放弃Ogg Theora时，这个标签也会被删除。但它仍然没有比<object>提供更明显的优势，因为你仍然希望客户端使用支持你的编解码器的浏览器。 - aehlke

它确实比<object>提供了明显的优势——一致的API和测试视频格式是否受支持的方法。编解码器几乎肯定会很快标准化。 - Quentin

@David 两年过去了，战斗仍在继续。但愿你当初是对的 :( - Matthew Scharley

Answer 3

我刚刚发现了Cortado。它是一个播放OGG的Java小程序。实际上，我要感谢David Dorward，因为查看HTML5的状态让我发现了它。 Firefox建议使用类似以下的内容：

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

Java可以在比Flash更多的平台上使用，在这种情况下，只需作为HTML5的备选方案。

(来源)

- WhyNotHugo

Answer 4

我知道有点晚了，但你看过VLC吗？

它可以嵌入网站，在Windows、Mac OS和Linux上运行，是免费的、开源的，支持许多视频/音频格式...

缺点是它没有一个漂亮的GUI界面，如播放/暂停/设置音量等功能，你必须自己创建。

你可以看一下这篇文章：http://www.videolan.org/doc/play-howto/en/ch04.html#id310965

- chrisnfoneur

---

谢谢，我前几天就看到了这个。最终我使用了带有Java回退的HTML5，但这也不是一个非常糟糕的想法。唯一的问题是没有安装VLC的客户端。 - WhyNotHugo

Answer 5

你认为为什么很多大型网站使用Flash播放视频？可能不是因为它不可用... 当然，有其他的方式来嵌入网页视频内容，但如果可用性是一个问题，目前Flash是最好的选择。

- Daan

---

假设Hugo不能使用Flash，他应该使用什么？ - Binary Worrier

即使只有10%的人被排除在外，我也想避免这种情况。我还有其他讨厌Flash的原因，所以我不会使用它。 - WhyNotHugo

我希望尽可能多的人能够查看这个。就我个人而言，我使用的操作系统不支持Flash，并且Gnash也已经停止开发，所以没有机会。除此之外，Flash通常在许多浏览器中“破坏一致性”。浏览器热键无法使用，因为Flash具有焦点；它不尊重可访问性（字体大小）设置等。 - WhyNotHugo

@Hugo：非常正确，这确实是Flash的缺点，但如果Flash可以使您的内容能够被很多人使用（前提是这是您的意图），那么忍受所有这些可能是值得的。 - Daan

我认为目前在浏览器中，你不会找到比Flash更广泛的视频解决方案。 - aehlke

Answer 6

我对这个问题进行了研究，因为我对xHtml+RDFa非常感兴趣，并找到了一种在HTML5浏览器中播放视频的方法，而不会阻塞非HTML5浏览器。

我在这里发布了一个jQuery插件：https://github.com/charlycoste/xhtml-video

还有一个演示：http://demo.ccoste.fr/video

实际上，这比使用HTML5标签要弱大得多，但至少...它可以工作！

解决方案依赖于javascript和canvas，但可以通过使用<object>标签来优雅地降级（这就是我的jQuery插件所做的）。

我所做的事情实际上很简单：

1. 我在内存中创建了一个新的video元素（不是标签），但我没有将其添加到DOM文档中：

   var video = document.createElement('video');
   

2. 我在内存中创建了一个新的canvas元素，但我没有将其添加到DOM文档中：

   var canvas = document.createElement('canvas');
   

3. 我创建了一个新的img元素，并且将它添加到了DOM中。

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. 当视频正在播放（video.play()）时，我让它在画布上绘制每一帧（画布不可见，因为没有添加到DOM中 - 这使得DOM保持有效的xhtml 1.0文档）

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

5. 最后，我使用canvas元素的toDataURL()方法获取帧的base64编码图像，并将其放置在img元素的src属性中。

   img.setAttribute('src', canvas.toDataURL());
   

通过这种方式，您可以使JavaScript对象在DOM之外播放视频，并将每个帧推送到img DOM元素中。因此，您可以使用浏览器的HTML5功能播放视频，但无需HTML5文档。

如果浏览器没有HTML5功能或无法处理所使用的编解码器，则会回退到本机<object>行为（通常情况下...浏览器将寻找像VLC等插件...）

如果没有播放视频的方法（没有插件），则将使用<object>标记内提供的替代内容。

性能方面：由于它导致非常高的消耗过程，因此播放可能会闪烁...为避免这种情况，您可以通过使用jpeg压缩来降低渲染质量：canvas.toDataURL('image/jpeg', quality)其中quality是0到1之间的值。

- Charles-Édouard Coste