将 Youtube 视频源显示为 HTML5 视频标签？

Posted 2023-02-24

【中文标题】将 Youtube 视频源显示为 HTML5 视频标签？

【英文标题】：Show Youtube video source into HTML5 video tag?

【发布时间】：2011-07-06 15:43:51

【问题描述】：

我正在尝试将 YouTube 视频源放入 html5 <video> 标记，但它似乎不起作用。经过一番谷歌搜索，我发现 HTML5 不支持将 YouTube 视频 URL 作为来源。

您可以使用 HTML5 嵌入 YouTube 视频吗？如果没有，有什么解决方法吗？

【问题讨论】：

***.com/questions/5157377/… 下面给出的 IFrame 解决方案应该足以解决问题。

【参考方案1】：

我已经为这个确切的功能创建了一个非常小的 (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/

库所做的是从数据属性中提取视频 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/

【讨论】：

您能解释一下如何在 Angular 中进行设置吗？

嗨 @levi-cole 我试过你的 GitHub 代码，但显示这个错误：prnt.sc/107j0as

@ParthaviPatel 请在 GitHub 上打开一个问题：github.com/thelevicole/youtube-to-html5-loader/issues 谢谢！

应该提到，这个库向作者的服务器 yt2html.com 发出请求以检索视频流 src。

@Spankied 正确！ 4.0.1 之前的版本能够直接与 YouTube API 联系，但它们随后实现了 CORS 标头，从而阻止通过 Ajax 检索数据。但是，我的服务器仍然可以成功发出请求，因此它充当了一个非常基本的中间人。

【参考方案2】：

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

【参考方案3】：

像hooktube 那样做怎么样？他们实际上并没有使用 html5 元素的视频 URL，而是调用该视频的谷歌视频重定向器 url。看看这里是他们如何呈现一些 depacito 随机视频...

<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 to mp3 变成了极其赚钱的怪物，现在在一半的视频下载请求中返回 download.html...烦人...

此答案中的 2 个链接是我个人对这两种资源的体验。 hooktube 是多么的美好和新鲜，实际上有助于避免审查和地理限制……看看吧，这很酷。 youtubeinmp4 是一个弹出式怪物，现在称为 ConvertInMp4...

【讨论】：

您不需要使用外部服务，只需使用 JavaScript。解析 youtube 的 get_video_info 页面，就可以得到 URL。

【参考方案4】：

此答案不再有效，但我正在寻找解决方案。

截至 。 2015 / 02 / 24 . 有一个website (youtubeinmp4) 允许您在.mp4 format 中下载youtube 视频，您可以利用它（使用一些JavaScript）将youtube 视频嵌入<video> 标签中。这是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>

不太常见但更小，直接在<video> 标记中使用缩短的网址youtu.be 作为src 属性。

【讨论】：

不错的功能，适用于 Mozilla 和 Chrome，但是如果

我已经实现了这个解决方案，但是 2 天后，YT 阻止了它。它不再起作用了。 :(

不幸的是，这不再起作用了。它曾经工作得很好。我希望有另一种解决方案！

这使用 php 来获取视频 url。在这种情况下，完全没有必要使用 JavaScript 以外的任何东西来获取 URL。

【参考方案5】：

第 1 步：将&html5=True 添加到您最喜欢的 youtube 网址

第二步：在源码中找到<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&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>

注意似乎有一些expire 的东西。我不知道src 字符串能工作多久。

仍在测试自己。

编辑（2011 年 7 月 28 日）：请注意，此视频 src 特定于您用于检索页面源的浏览器。我认为 Youtube 会动态生成这个 HTML（至少目前是这样），所以在测试我是否在 Firefox 中复制时，这适用于 Firefox，但不适用于 Chrome。

【讨论】：

到期和它只在特定浏览器中有效的事实使得这个解决方案毫无用处。

它能播放所有 youtube 视频吗？

YouTube 理论上可以随时更改所有视频的底层存储 URL。上面src 属性中提供的 URL 可能无法保证长期有效。

是的，有用的信息，但听起来是个坏主意。 YouTube 可以随时决定关闭对直接视频链接的访问。

【参考方案6】：

W3schools 给出了最简单的答案。 https://www.w3schools.com/html/html_youtube.asp

将您的视频上传到 Youtube 记下视频 ID 现在在您的 HTML5 中编写此代码。

<iframe  
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

【讨论】：

问题询问的是

【参考方案7】：

<video> 标签用于加载支持格式的视频（可能因浏览器而异）。

YouTube 嵌入链接不仅仅是视频，它们通常是包含逻辑的网页，用于检测您的用户支持的内容以及他们如何播放 youtube 视频，使用 HTML5、flash 或其他基于可用内容的插件用户电脑。这就是为什么您很难将视频标签与 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
    
);

【讨论】：

我最近遇到这个问题：iPad不再支持全屏！您的 jsfiddle-example 非常适合说明：在 pc 上有效，在 iPad 上无效。 ..我想我应该对此提出一个新问题，但这里的人也许可以发表评论？

@Snorvarg 我的答案应该适用于任何兼容 HTML5 的浏览器，只要您在 iPad 上运行的是相当新版本的 ios（10+），它应该可以工作。如果您不需要以编程方式控制视频，可以尝试使用简单的 iframe embed API。您可以在 developers.google.com/youtube/iframe_api_reference#Examples 找到一个示例，或查看 vinayvasyani 的答案。如果您仍有问题，那么我会使用***.com/help/how-to-ask 上的“如何提出一个好问题”指南提出一个新问题。

@Snorvarg 我遇到了这个productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y，在 Firefox 中也出现了类似的问题，并且由于他们需要请求全屏权限而得到了解决。所以我敢打赌，这就是为什么你的 iPad 不能全屏显示的原因，不幸的是 iOS Safari 似乎不支持。另一种解决方案是添加您自己的全屏按钮，然后将 iframe 播放器的大小调整为屏幕的宽度/高度。

感谢您的提示和链接。几天前我在这里添加了一个问题：***.com/questions/49650040/… 但是过了一段时间，我决定按照您的建议制作一个自己的全屏按钮，并且效果很好。

好东西，但是我遇到了错误“TypeError：YT.Player 不是构造函数”，如下所述：***.com/questions/52062169/…。正如（唯一）答案指出的那样，异步脚本加载的结果和 API 在被调用时尚未准备好。这可以通过实现onYouTubeIframeAPIReady 函数（并将上述代码的最后一个代码块放入其中）来避免。

【参考方案8】：

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

嵌入YouTube视频的iframe代码如下，只需复制Video ID并替换在下面的代码中即可：

<iframe type="text/html" 
     
     
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>

【讨论】：

“新”iframe 标签？ iframe 已经存在很长时间了……

这不是答案的解决方案，它清楚地说明了视频标签而不是 iframe...

也许OP只是不知道iframe标签的存在，这就是他直接询问video标签的原因。否则他不会问 HTML5（通常）是否支持 Youtube 视频，但他会将问题限制在 video 标签上。他甚至问“有什么解决方法吗？”在他的最后一句话中，所以这个答案是完全有效的。

要在我的 blogger.com 博客中嵌入 youtube.com 视频，iframe 是唯一方便的解决方案。最重要的是，youtube.com 生成的嵌入代码是一个 iframe 标记。此外，w3schools.com 推荐 iframe：http://www.w3schools.com/html/html_youtube.asp。没有提到视频标签的地方。

以防万一有人好奇...问题是使用视频标签不是 YouTube 视频的正确方法，因为嵌入 YouTube 视频的公共 URL 不是实际的媒体资源。这就是为什么有人建议使用 iframe。尝试使用视频标签意味着您将使用将来可能会更改的私有 URL。这就像试图在面向对象的语言中访问私有成员一样。你可以在这里查看 YouTube 的官方文档developers.google.com/youtube/iframe_api_reference#Examples