将 Youtube 视频源显示到 HTML5视频标签中？

我试图把一个 YouTube 视频源到 HTML5<video>标签，但它似乎没有工作。经过一番谷歌搜索，我发现 HTML5不支持 YouTube 视频网址作为源。

你能用 HTML5嵌入 YouTube 视频吗? 如果不能，有什么解决办法吗？

424401 次浏览
小开
最佳答案

步骤1: 添加 &html5=True到你最喜欢的 youtube 网址

步骤2: 在源代码中查找 <video/>标记

步骤3: 将 controls="controls"添加到视频标签: <video controls="controls"..../>

例如:

<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&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

Note there seems to some expire stuff. I don't know how long the src string will work.

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.

小开

随着新的 iframe 标签嵌入到您的网站中，代码将自动检测您是否使用支持 HTML5的浏览器。

用于嵌入 YouTube 视频的 iframe 代码如下，只需复制 Video ID 并替换以下代码:

<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
小开

这个答案不再有用了，但我正在寻找一个解决方案。

在 2015/02/24.中有一个 网站(youtubeinmp4) ，它允许你在 .mp4 format中下载 youtube 视频，你可以利用它(使用一些 JavaScript)在 <video>标签中嵌入 youtube 视频。这里是一个 < strong > demo 的行动。

专业人士

  • 相当 很容易实现。
  • 实际上相当 快速服务器响应(检索视频不需要那么多)。
  • 抽象 (接受的解决方案，即使工作正常，也只适用于事先知道要播放哪个视频的情况，这适用于任何用户输入的 URL)。

缺点

  • 它显然取决于 youtubeinmp4.com服务器及其提供下载链接的方式(可以作为 <video>源文件传递) ，因此这个答案在将来可能无效。

  • 你不能选择视频质量。

# # # 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;
}
}
}

# # # 用法(完全)

<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

标准视频格式。

用法(迷你版)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

A little less common but quite smaller, using the shortened url youtu.be as the src attribute directly in the <video> tag.

小开

<video>标签用于加载支持格式的视频(可能因浏览器不同而不同)。

YouTube 嵌入式链接不仅仅是视频，它们是典型的网页，包含逻辑来检测你的用户支持什么，以及他们如何使用 HTML5、 flash 或其他一些基于用户电脑上可用的插件来播放 YouTube 视频。这就是为什么你很难在 youtube 视频中使用视频标签的原因。

YouTube 确实提供了一个开发者 API，可以将一个 YouTube 视频嵌入到你的页面中。

我制作了一个 JSFiddle 作为实例: http://jsfiddle.net/zub16fgt/

你可以在这里阅读更多关于 YouTube API 的内容: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

守则亦载于下文

在你的 HTML 中: 

<div id="player"></div>

在你的 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
}
});
小开

用 钩管的方法怎么样？他们实际上并不使用 html5元素的视频 URL，而是调用该视频的谷歌视频重定向 URL。看看他们是如何展示一些随机视频的。

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

代码是为下面的视频页面 https://hooktube.com/watch?v=72UO0v5ESUo

另一方面，youtube 到 mp3 已经变成了一个极其赚钱的怪物，现在一半的视频下载请求都会返回 download.html... ... 烦人... ..。

这个答案中的两个链接是关于我个人在这两个资源方面的经验。钩管是多么美好和新鲜，实际上有助于避免审查和地理限制。.看看，很酷。Youtubeinmp4是一个弹出式的怪物，现在被称为 ConvertInmp4..。

小开

最简单的答案来自 W3商学院。 Https://www.w3schools.com/html/html_youtube.asp

  1. 把你的视频上传到 Youtube
  2. 注意视频 ID
  3. 现在在 HTML5中编写这段代码。
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
小开

我已经为这个功能创建了一个相当小的(4.89 KB) javascript 库。

在我的 GitHub 上找到的: https://github.com/thelevicole/youtube-to-html5-loader/

这很简单:

<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>


<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>

工作示例: https://jsfiddle.net/thelevicole/5g6dbpx3/1/

该库所做的是从 data 属性中提取视频 ID 并向 https://www.youtube.com/get_video_info?video_id=发出请求。它解码响应，其中包括我们可以用来向 <video>标记添加源的流信息。

更新日期: 2021年6月

YouTube 最近更新了他们的 API，这打破了以前版本的这个软件包。请现在使用版本 4.0.1和以上！最新例子:

<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>


<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>

Https://jsfiddle.net/thelevicole/5g6dbpx3/2/

小开

如果有人碰巧发现这个问题，一个嵌入 YouTube 视频的简单方法是使用 embed标签，如下: <embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">


提交答案