在网页中嵌入视频 (HTML)

StackOverflow https://stackoverflow.com/questions/1200719

题

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

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

有帮助吗？

解决方案

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

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

其他提示

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>
<！>

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

我刚遇到 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。

（来源）

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

它可以嵌入到网站中，在Windows上运行，Mac OS <！>放大器; Linux，是免费的，开源的，支持很多视频/音频格式......

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

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

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

我研究了这个问题，因为我对 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. 最后我使用 toDataURL() 的方法 canvas 元素获取该帧的 base64 编码图像并将其放入 src 的属性 img 元素。

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

通过这样做，您可以使 JavaScript 对象从 DOM 中播放视频，并将每个帧推送到一个 img DOM 元素。因此，您可以使用浏览器的 HTML5 功能来播放视频，但不需要 HTML5 文档。

如果浏览器没有 HTML5 功能或者无法处理所使用的编解码器，它将回退到本机 <object> 行为（一般...浏览器会寻找像 VLC 这样的插件，等等......）

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top