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

Question

这段代码一开始可以工作，但我认为链接会更改，因为第二天就找不到了？
视频在Firefox/Chrome/Opera下播放...如何使视频标签永久地播放此视频？！

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

- blade19899

---

你有尝试过这个吗？http://www.youtube.com/html5 - dmi3y

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现在有一个巧妙的包装对象用于YouTube API，它将使YouTube（他们也有Vimeo）视频表现得像HTMLVideoElement一样，具有大多数相同的属性、方法和事件。它并不完美，但相当不错。

注意：该文件的官方来源在mozilla/popcorn-js存储库中，但this one目前领先于错误修复和功能。你需要包括来自该存储库的最新版本的Popcorn.js和wrappers/common/popcorn._MediaElementProto.js。确保在设置src时向YT URL添加&html5=1。

你会注意到的区别是：

即使使用包装器，HTML5视频API的性能也比YT API稍微好一点。例如，更具有响应性和更好的缓冲报告。

您无法摆脱YouTube图标，该图标出现在暂停或鼠标悬停时的右下角。

您无法阻止YouTube显示广告。

您无法访问实际的视频/音频内容，例如音频API和画布/webgl绘制。但由于跨域限制，您无论如何都不能这样做。

- brianchirls

---

是的，你说得对，这违反了他们的服务条款（ToS）。请参考developers.google.com/youtube/terms，其中第II部分第10点规定禁止“除使用YouTube播放器或其他受YouTube明确授权的视频播放器之外的任何手段访问任何YouTube音频视觉内容的任何部分。” - Ola Karlsson