How to通过HTML5视频标签播放YouTube视频

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

在真正的视频标签中实际播放YouTube视频并不是一种可靠的方式. YouTube不希望你这样做,这可能是针对他们的TOs.无论如何,该URL可能会定期更改,无论YT是否调整其基础架构,或者他们出路阻止人们直接访问视频文件.

但是,如果您使用视频标签,您可以采取几个步骤来完成所有可以做的事情.要开始,您可以为嵌入添加“html5 = 1”提示,这将告诉YouTube使用html5视频而不是Flash(通常符合但不总是).视频将在一个iframe中,但您可以将所有常见的CSS技巧应用于该iframe – 不透明度,转换等.@H_801_10@

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

现在,如果你想进一步,Popcorn.js现在有一个漂亮的wrapper object的YouTube API,将使一个YouTube(他们有一个为Vimeo)视频表现得像一个HTMLVideoElement,大多数相同的属性,方法和事件.这不是完美的,但它是相当不错的.@H_801_10@

注意：该文件的官方来源是mozilla/popcorn-js回购,但this one目前正在提供错误修复和功能.您需要从该repo中添加最新版本的Popcorn.js和wrapper / common / popcorn._MediaElementProto.js.确保在设置src时将& html5 = 1添加到YT URl.@H_801_10@

你会注意到的差异是：@H_801_10@

>即使使用包装器,HTML5视频API只是比YT API好一点.例如,更有反应和更好地报告缓冲.>您无法摆脱在暂停或鼠标悬停显示的右下角的YouTube图标.>您无法保持YouTube不显示广告.>您无法访问实际的视频/音频内容,例如Audio API和canvas / webgl图形.但是,由于跨原产地限制,您无法做到这一点.@H_801_10@