Html 如何通过 HTML5 视频标签播放 YouTube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13516345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Howto Play YouTube videos via HTML5 video tag
提问by blade19899
This code works for a moment but i think the links changes, cause the next day it is not found?
the video played under Firefox/Chrome/Opera... how to make the video tag play this video permanently?!
这段代码工作了一会儿，但我认为链接发生了变化，导致第二天找不到它？
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>
回答by brianchirls
There isn't really a reliable way to actually play a YouTube video inside a real video tag. YouTube doesn't want you doing that, and it's probably against their TOS. In any case, that URL is probably going to change regularly, whether YT adjusts their infrastructure or they go out of their way to stop people from directly accessing the video files.
没有真正可靠的方法可以在真实的视频标签中实际播放 YouTube 视频。YouTube 不希望您这样做，这可能违反了他们的 TOS。在任何情况下，该 URL 都可能会定期更改，无论 YT 是调整他们的基础设施还是他们不遗余力地阻止人们直接访问视频文件。
However, there are a few steps you can take to be able to do just about everything you could do if you were using the video tag. To start, you can add the "html5=1" hint to the embed, which will tell youtube to use html5 video instead of Flash (it usually complies, but not always). The video will be in an iframe, but you can apply all the usual CSS tricks to that iframe - opacity, transforms, etc.
但是，如果您使用视频标签，您可以采取一些步骤来完成几乎所有您可以做的事情。首先，您可以在嵌入中添加“html5=1”提示，这将告诉 youtube 使用 html5 视频而不是 Flash（它通常符合，但并非总是如此）。视频将在 iframe 中，但您可以将所有常用的 CSS 技巧应用于该 iframe - 不透明度、变换等。
If you're using the YouTube API, add html5: 1to the playerVars. If you're just doing a straight iframe embed, add it to the query string like this:
http://www.youtube.com/embed/okqEVeNqBhc?html5=1
如果您使用的是 YouTube API，请添加html5: 1到playerVars. 如果您只是直接嵌入 iframe，请将其添加到查询字符串中，如下所示：http:
//www.youtube.com/embed/okqEVeNqBhc?html5=1
Now, if you want to go one step further, Popcorn.js now has a nifty wrapper objectfor the YouTube API that will make a YouTube (they have one for Vimeo too) video behave like an HTMLVideoElement, with most of the same properties, methods and events. It isn't perfect, but it's pretty good.
现在，如果你想更进一步，Popcorn.js 现在为 YouTube API提供了一个漂亮的包装器对象，它将使 YouTube（他们也有一个用于 Vimeo 的）视频表现得像 HTMLVideoElement，具有大多数相同的属性，方法和事件。它并不完美，但已经很不错了。
Note: The official source for that file is on the mozilla/popcorn-jsrepo, but this oneis currently ahead with bug fixes and features. You need to include the latest version of Popcorn.js and wrappers/common/popcorn._MediaElementProto.jsfrom that repo. Make sure you add &html5=1to the YT URL when you set the src.
注意：该文件的官方来源位于mozilla/popcorn-js 存储库中，但该存储库目前正在修复错误和功能。您需要包含最新版本的 Popcorn.js 和wrappers/common/popcorn._MediaElementProto.js该存储库。确保&html5=1在设置src.
The differences you'll notice are:
您会注意到的差异是：
Even with the wrapper, the HTML5 video API just performs a little bit better than the YT API. e.g., more responsive and better reporting of buffering.
You can't get rid of the YouTube icon in the lower right corner that shows up on pause or mouseover.
You can't keep YouTube from showing ads.
You can't access the actual video/audio content for things like the Audio API and canvas/webgl drawing. But you couldn't do that anyway because of cross-origin restrictions.
即使使用包装器，HTML5 视频 API 的性能也只是比 YT API 好一点。例如，更灵敏和更好的缓冲报告。
您无法摆脱右下角暂停或鼠标悬停时显示的 YouTube 图标。
您无法阻止 YouTube 展示广告。
您无法访问音频 API 和 canvas/webgl 绘图等内容的实际视频/音频内容。但是由于跨域限制，您无论如何都不能这样做。
