【问题标题】:Howto Play YouTube videos via HTML5 video tag如何通过 HTML5 视频标签播放 YouTube 视频
【发布时间】:2012-11-11 01:36:07
【问题描述】:

这段代码暂时有效,但我认为链接发生了变化,导致第二天找不到它?
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>

【问题讨论】:

标签: html html5-video


【解决方案1】:

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

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

如果您使用的是 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 时将 &amp;html5=1 添加到 YT 网址。

您会注意到的差异是:

  • 即使使用包装器,HTML5 视频 API 的性能也比 YT API 好一点。例如,更快的响应和更好的缓冲报告。

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

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

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

【讨论】:

  • 是的,您说得对,这违反了他们的 ToS 服务条款,请参阅 developers.google.com/youtube/terms,第二部分第 10 点。它声明禁止“访问除使用 YouTube 播放器或 YouTube 明确授权的其他视频播放器以外的任何方式的任何 YouTube 视听内容;"
猜你喜欢
  • 2014-02-10
  • 1970-01-01
  • 2013-08-23
  • 1970-01-01
  • 2011-10-22
  • 2012-10-11
  • 2014-01-08
  • 1970-01-01
相关资源
最近更新 更多