如何通过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>

Answer 1

在真实的视频标签中实际播放YouTube视频并不是一种可靠的方法.YouTube不希望你这样做,而且可能违反了他们的服务条款.在任何情况下,该网址可能会定期更改,无论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 repo上,但是这个目前还有bug修复和功能.您需要包含最新版本的Popcorn.js以及wrappers/common/popcorn._MediaElementProto.js该回购.确保&html5=1在设置时添加到YT URL src.

您会注意到的差异是:

• 即使使用包装器,HTML5视频API也只比YT API执行得更好.例如,更灵敏,更好的缓冲报告.

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

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

• 您无法访问Audio API和canvas/webgl绘图等实际视频/音频内容.但是,由于跨域限制,你不能这样做.