如何通过HTML5视频标签播放YouTube视频 [英] Howto Play YouTube videos via HTML5 video tag
问题描述
这段代码可以工作一段时间，但我认为链接会改变，导致第二天找不到它？
在Firefox / Chrome / Opera下播放的视频...如何制作视频标签永久播放此视频？！
< video width =480height =270controls =controlsstyle = 颜色：绿; >
< source src =youtubelinktype =video / mp4>
< source src =youtubelinktype =video / ogg>
< source src =youtubelinktype =video / webm>
您的浏览器不支持视频标签。
< / video>
实际上并没有真正可靠的方法一个真正的视频标签内的YouTube视频。 YouTube不希望你这样做，这可能违反了他们的TOS。在任何情况下，该网址可能会定期更改，无论YT是调整其基础架构，还是他们不顾一切地阻止人们直接访问视频文件。
但是，如果您使用视频标签，则可以采取几个步骤来完成所有可以执行的操作。首先，您可以将html5 = 1提示添加到嵌入中，这会告诉YouTube使用html5视频而不是Flash（通常符合但不总是）。该视频将位于iframe中，但您可以将所有常用的CSS技巧应用于该iframe - 不透明度，转换等。
如果您使用的是YouTube API ，向 playerVars 添加 html5：1 。如果您只是直接嵌入iframe，请将其添加到查询字符串中，如下所示：
http://www.youtube.com/embed/okqEVeNqBhc?html5=1
现在，如果您想更进一步， Popcorn.js现在有一个漂亮的包装对象的YouTube API（它们也有一个用于Vimeo）的YouTube API，它的行为与HTMLVideoElement类似，具有大部分相同的属性，方法和事件。这不是完美的，但它很好。
注意：该文件的官方来源位于 mozilla / popcorn-js 回购，但这一款目前正在提供错误修复和功能。您需要从该repo中包含最新版本的Popcorn.js和 wrappers / common / popcorn._MediaElementProto.js 。确保您在设置 src 时将& html5 = 1 添加到YT URL。
您会注意到的差异是：
-
即使使用包装器，HTML5也是如此视频API只比YT API好一点点。例如，更灵敏和更好的缓冲报告。
您无法摆脱暂停或鼠标悬停时显示的右下角的YouTube图标。 您可以' t访问音频API和画布/ webgl绘图等实际视频/音频内容。但是，由于互相限制的原因，您无法这么做。
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?!
<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>
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.
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.
If you're using the YouTube API, add html5: 1 to 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
Now, if you want to go one step further, Popcorn.js now has a nifty wrapper object for 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.
Note: The official source for that file is on the mozilla/popcorn-js repo, but this one is currently ahead with bug fixes and features. You need to include the latest version of Popcorn.js and wrappers/common/popcorn._MediaElementProto.js from that repo. Make sure you add &html5=1 to the YT URL when you set the 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视频标签播放YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
