html - 如何通过 HTML5 视频标签播放 YouTube 视频

Question

此代码暂时有效，但我认为链接已更改，导致第二天找不到它？
Firefox/Chrome/Opera下播放的视频...如何让video标签永久播放该视频？!

<video width="480" height="270" controls="controls" style="color:green;">
  <source src="youtubelink" type="video/mp4">
  <source src="youtubelink" type="video/ogg">
  <source src="youtubelink" type="video/webm">
Your browser does not support the video tag.
</video>

Answer 1

在真实视频标签内实际播放 YouTube 视频并没有真正可靠的方法。 YouTube 不希望您这样做，而且这可能违反了他们的服务条款。无论如何，该 URL 可能会定期更改，无论 YT 是否调整其基础架构，或者他们竭尽全力阻止人们直接访问视频文件。

但是，如果您使用视频标签，您可以采取一些步骤来完成几乎所有您可以做的事情。首先，您可以向嵌入添加“html5=1”提示，这将告诉 youtube 使用 html5 视频而不是 Flash(它通常符合要求，但并非总是如此)。视频将位于 iframe 中，但您可以将所有常用的 CSS 技巧应用于该 iframe - 不透明度、变换等。

如果您使用的是 YouTube API，请将 html5:1 添加到 playerVars。如果您只是直接嵌入 iframe，请将其添加到查询字符串中，如下所示: http://www.youtube.com/embed/okqEVeNqBhc?html5=1

现在，如果您想更进一步，Popcorn.js 现在有一个漂亮的 wrapper object对于 YouTube API，它将使 YouTube(他们也有一个用于 Vimeo)视频的行为类似于 HTMLVideoElement，具有大部分相同的属性、方法和事件。它并不完美，但非常好。

注意:该文件的官方来源在 mozilla/popcorn-js 上 repo ，但是 this one目前在错误修复和功能方面处于领先地位。您需要从该存储库中包含最新版本的 Popcorn.js 和 wrappers/common/popcorn._MediaElementProto.js。确保在设置 src 时将 &html5=1 添加到 YT URL。

您会注意到的区别是:

• 即使使用包装器，HTML5 视频 API 的性能也只比 YT API 好一点点。例如，更灵敏和更好的缓冲报告。

• 您无法摆脱右下角在暂停或鼠标悬停时显示的 YouTube 图标。

• 您无法阻止 YouTube 展示广告。

• 您无法访问音频 API 和 canvas/webgl 绘图等内容的实际视频/音频内容。但由于跨源限制，您无论如何都不能这样做。