在网页中嵌入视频 (HTML)

Posted 2023-03-13

【中文标题】在网页中嵌入视频 (HTML)

【英文标题】：Embed video in web page (HTML)

【发布时间】：2010-11-15 02:27:55

【问题描述】：

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

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

【问题讨论】：

Hugo，我从您的问题中删除了您对 Flash 的“个人”意见。您只会被激怒，然后您的问题将被关闭为“主观和争论”

重点不是批评它，而是说“我不想使用它”。 :)

我也有同感，我花了几年的时间才找到解决方案……就是这样！这不是有史以来最好的解决方案......性能不是很好......但它确实有效！ （刚刚发布在这里作为答案）

【参考方案1】：

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

一个例子是 Camen Design 的Video for Everybody，它符合 HTML5，并为 IE 使用条件 cmets，为旧版浏览器使用嵌套对象标记。这应该符合标准、向后兼容且面向未来。

【讨论】：

哇！这完全是规则，喜欢它！

【参考方案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>

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

【讨论】：

我从来没有遇到过这个。什么播放此标签中的视频？市长浏览器是否真的有一个插件可以让这个工作，或者这是一个 5% 的人的事情？

它是标准的 HTML 4.01。任何插件注册自己来处理视频/ogg（在这个例子中）数据都会处理它。安装 VLC 为我提供了所需的支持（Firefox 在未安装时提示我寻找插件）。我从来没有调查过合适插件的安装基础，所以我不知道支持级别是什么样的。

酷。对于

，这是一个很好的后备方案

@Wahnfrieden 你好！欢迎来到 2009 年。事情可能与您习惯的有所不同。 w3.org/TR/html5/video.html#video

@David 两年后，战斗仍在继续。我希望你是对的:(

【参考方案3】：

我刚刚遇到Cortado。这是一个播放 OGG 的 Java 小程序。我实际上必须感谢 David Dorward，因为检查 HTML5 的状态让我遇到了它。 Firefox 建议使用类似：

 <video src="my_ogg_video.ogg" controls  >  
   <object type="application/x-java-applet"  
            >  
      <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。

(source)

【参考方案4】：

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

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

缺点是它没有带有播放/暂停/设置音量/...功能的漂亮GUI，您必须自己创建它们。

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

【讨论】：

谢谢，我前几天确实遇到了这个问题。我最终将 HTML5 与 java 后备一起使用，但这也不是一个坏主意。唯一的问题是没有安装 VLC 的客户端。

【参考方案5】：

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

【讨论】：

让我们假设 Flash 不是 Hugo 的选项。他应该用什么？

即使只有10%的人被排除在外，我也想避免。反正我还有一些讨厌 flash 的理由，所以我不会用它。

这可能更像是 0.1% 的人。

@BW：他应该使用什么取决于网站的目标/目标用户。公众：使用 大多数 用户拥有插件的格式（不确定会是哪种格式）。特定用户组/公司/技术环境：使用该上下文中可用的格式。

可能。在这种情况下，甚至 x86 linux 用户也不会被排除在外。

【参考方案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 插件所做的）优雅地降级。

我做的其实很简单：

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

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

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

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

我创建了一个新的img 元素并我将它添加到 DOM。

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

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

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

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

最后我使用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。