Html 将 Youtube 视频源显示为 HTML5 视频标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5157377/
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
Show Youtube video source into HTML5 video tag?
提问by sri
I'm trying to put a YouTube video source into the HTML5 <video>tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
我正在尝试将 YouTube 视频源放入 HTML5<video>标签中，但它似乎不起作用。经过一番谷歌搜索，我发现 HTML5 不支持 YouTube 视频 URL 作为源。
Can you use HTML5 to embed YouTube videos? If not, is there any workaround?
您可以使用 HTML5 嵌入 YouTube 视频吗？如果没有，有什么解决方法吗？
采纳答案by Simon Flack
Step 1: add &html5=Trueto your favorite youtube url
第 1 步：添加&html5=True到您最喜欢的 youtube 网址
Step 2: Find <video/>tag in source
第 2 步：<video/>在源中查找标签
Step 3: Add controls="controls"to video tag: <video controls="controls"..../>
第 3 步：添加controls="controls"到视频标签：<video controls="controls"..../>
Example:
例子：
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note there seems to some expirestuff. I don't know how long the srcstring will work.
注意似乎有些expire东西。我不知道src字符串能用多久。
Still testing myself.
还在考验自己。
Edit (July 28, 2011): Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome, for example.
编辑（2011 年 7 月 28 日）：请注意，此视频 src 特定于您用于检索页面源的浏览器。我认为 Youtube 动态生成此 HTML（至少目前是这样），因此在测试我是否在 Firefox 中复制时，这适用于 Firefox，但不适用于 Chrome。
回答by undefined
This answer does not work anymore, but I'm looking for a solution.
这个答案不再有效，但我正在寻找解决方案。
As of . 2015 / 02 / 24 .there is a website (youtubeinmp4)that allows you to download youtube videos in .mp4 format, you can exploit this (with some JavaScript) to get away with embedding youtube videos in <video>tags. Here is a demoof this in action.
截至. 2015 年 2 月 24 日。有一个网站 (youtubeinmp4)允许您下载 youtube 视频.mp4 format，您可以利用它（使用一些 JavaScript）来摆脱在<video>标签中嵌入 youtube 视频的问题。这是一个实际的演示。
Pros
优点
- Fairly easy to implement.
- Quite fast server responseactually (it doesn't take that much to retrieve the videos).
- Abstraction(the accepted solution, even if it worked properly, would only be applicable if you knew beforehand which videos you were going to play, this works for any user inputted url).
- 相当容易实施。
- 实际上，服务器响应速度非常快（检索视频不需要那么多时间）。
- 抽象（公认的解决方案，即使它工作正常，也只有在您事先知道要播放哪些视频时才适用，这适用于任何用户输入的网址）。
Cons
缺点
It obviously depends on the
youtubeinmp4.comservers and their way of providing a downloading link (which can be passed as a<video>source), so this answer may not be valid in the future.You can't choose the video quality.
这显然取决于
youtubeinmp4.com服务器及其提供下载链接的方式（可以作为<video>源传递），因此此答案将来可能无效。您无法选择视频质量。
JavaScript (after load)
JavaScript（之后load）
videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
Usage (Full)
用法（完整）
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Standard video format.
标准视频格式。
Usage (Mini)
用法（迷你）
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
A little less common but quite smaller, using the shortened url youtu.beas the srcattribute directly in the <video>tag.
不太常见但相当小，直接在标签中使用缩短的 urlyoutu.be作为src属性<video>。
Hope it helps! :)
希望能帮助到你！:)
回答by Norman Breau
The <video>tag is meant to load in a video of a supported format (which may differ by browser).
该<video>标签旨在加载支持格式的视频（可能因浏览器而异）。
YouTube embed links are not just videos, they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video, using HTML5, or flash, or some other plugin based on what is available on the users PC. This is why you are having a difficult time using the video tag with youtube videos.
YouTube 嵌入链接不仅仅是视频，它们通常是包含逻辑的网页，用于检测您的用户支持什么以及他们如何使用 HTML5、Flash 或其他一些基于用户 PC 上可用内容的插件来播放 YouTube 视频。这就是为什么您在使用带有 youtube 视频的视频标签时遇到困难的原因。
YouTube does offer a developer API to embed a youtube video into your page.
YouTube 确实提供了一个开发人员 API，可以将 YouTube 视频嵌入到您的页面中。
I made a JSFiddle as a live example: http://jsfiddle.net/zub16fgt/
我做了一个 JSFiddle 作为一个活生生的例子：http: //jsfiddle.net/zub16fgt/
And you can read more about the YouTube API here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
您可以在此处阅读有关 YouTube API 的更多信息：https: //developers.google.com/youtube/iframe_api_reference#Getting_Started
The Code can also be found below
代码也可以在下面找到
In your HTML:
在您的 HTML 中：
<div id="player"></div>
In your Javascript:
在您的 Javascript 中：
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});
回答by Sergey Kireyev
how about doing it the way hooktubedoes it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...
像hooktube那样做怎么样？他们实际上并不使用 html5 元素的视频 URL，而是调用该视频的谷歌视频重定向器 URL。看看这里是他们如何呈现一些 despacito 随机视频...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo
代码用于以下视频页面https://hooktube.com/watch?v=72UO0v5ESUo
youtube to mp3on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...
另一方面，youtube 到 mp3已经变成了极度货币化的怪物，现在在一半的视频下载请求上返回 download.html ......烦人......
the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...
这个答案中的 2 个链接是我对这两种资源的个人经验。hooktube 是多么漂亮和新鲜，实际上有助于避免和地理限制.. 看看，它很酷。和 youtubeinmp4 是一个弹出怪物，现在被称为 ConvertInMp4 ...
回答by vinayvasyani
With the new iframe tag embedded in your website, the code will automatically detect whether you are using a browser that supports HTML5 or not.
将新的 iframe 标记嵌入您的网站后，代码将自动检测您是否使用支持 HTML5 的浏览器。
The iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:
嵌入 YouTube 视频的 iframe 代码如下，只需复制 Video ID 并替换为下面的代码：
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
