在网页中嵌入视频（HTML）

Question

我想在网页中嵌入一个视频。
我不想使用闪存，因为它不适用于大量平台。
我不愿意使用HTML5因为它不太标准（它是标准的，但大多数人没有支持它的浏览器）

还有其他方法吗？ 或者我应该坚持HTML5和一个巨大的横幅告诉人们升级他们的浏览器？

Answer 1

对于不支持的浏览器，有几种方法可以将HTML5视频与回退结合起来。 已经证明了一些具体的解决方案。

一个例子是Camen Design的Video for Everybody ，它符合HTML5，并使用IE的条件注释和旧浏览器的嵌套对象标签。 这应该是符合标准，向后兼容和未来的证据。

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>

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

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可用于FAR MORE平台而不是flash，在这种情况下，如果只是回退到HTML5。

（ 来源 ）

Answer 4

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

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

缺点是它没有一个很好的GUI与播放/暂停/设置音量/ ...功能，你必须自己创建它们。

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

Answer 5

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

Answer 6

我解决了这个问题，因为我对xHtml + RDFa非常感兴趣，我发现了一种在HTML5浏览器上的xHtml 1.0严格文档中播放视频的方法，而不会阻止HTML5浏览器。

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

这里有一个演示： http ： //demo.ccoste.fr/video

实际上，这比使用HTML5标签要强大得多，但至少......它有效！

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

我做的事实上很简单：

1. 我在内存中创建了一个新的视频元素 （不是标签），但我没有将它添加到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之间的值。