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现在有一个漂亮的wrapper object用于制作YouTube的YouTube API（他们也有一个用于Vimeo）视频的行为类似于HTMLVideoElement，大多数相同的属性，方法和事件。它并不完美，但它非常好。

注意：该文件的官方来源位于mozilla/popcorn-js repo，但this one目前尚未提供错误修复和功能。您需要在该回购中包含最新版本的Popcorn.js和wrappers/common/popcorn._MediaElementProto.js。设置&html5=1时，请确保将src添加到YT网址。

您会注意到的差异是：

即使使用包装器，HTML5视频API也只比YT API执行得更好。例如，更敏感，更好的缓冲报告。
您无法摆脱右下角显示暂停或鼠标悬停的YouTube图标。
您无法阻止YouTube展示广告。
您无法访问音频API和画布/ webgl绘图等实际视频/音频内容。但是，由于跨域限制，你无法做到这一点。

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

1 个答案: