logo标签列表

如何将YouTube视频源展示在HTML5视频标签中？

htmlyoutubeembedded-video
141
我试图将YouTube视频源放入HTML5的<video> 标签中，但似乎无法工作。经过一些搜索，我发现HTML5不支持将YouTube视频URL作为源。
您能否使用HTML5嵌入YouTube视频？如果不行，有没有解决方法？
2
以下是由https://dev59.com/DW435IYBdhLWcg3w4UUc提供的IFrame解决方案，应该足以作为一种解决方法。 - S Meaden
8个回答
38

这个答案已经不再适用，但我正在寻找解决办法。

截止至. 2015 / 02 / 24 .，有一个网站（youtubeinmp4）允许您以.mp4格式下载YouTube视频，您可以利用此功能（使用一些JavaScript）以嵌入YouTube视频在<video>标签中。这里是示例演示。

##优点

  • 实现相对简单。
  • 响应速度相当快（检索视频并不需要太多时间）。
  • 抽象化（接受的解决方案即使正常工作，也只适用于预先知道要播放哪些视频的情况，而此方法对任何用户输入的URL均可使用）。

##缺点

  • 显然依赖于youtubeinmp4.com服务器及其提供下载链接的方式（可以作为<video>源传递），因此此答案可能在未来无效。

  • 您无法选择视频质量。

###JavaScript（加载后）

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>

标准视频格式。

###使用（Mini）

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

较少见但相对较小的一种方法是，在<video>标签中，直接使用缩短后的网址youtu.be作为src属性。

不错的函数，适用于Mozilla和Chrome，但如果<video>具有100％的宽度和200px的高度，如何设置视频的宽度和高度。 - Anmol Ratan Mohla
1
我已经实现了这个解决方案，但两天后，YT就封锁了它。它不再起作用了。 :( - apires
1
很遗憾，这个不再起作用了。它曾经非常好用。我希望有另一种解决方案！ - Chamilyan
这里使用 PHP 获取视频 URL。在这种情况下，完全没有必要使用除 JavaScript 以外的任何东西来获取该 URL。 - myjobistobehappy
28
<video>标签用于加载支持的视频格式（在不同的浏览器中可能有所不同）。
YouTube嵌入链接不仅仅是视频，它们通常是包含逻辑的网页，用于检测用户支持哪些方式以及如何播放YouTube视频，使用HTML5、Flash或其他插件，根据用户PC上可用的内容而定。这就是为什么你使用video标签来播放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示例很完美地说明了这一点：在电脑上它可以工作，在iPad上却不行。我想我应该在这方面提出一个新问题，但也许这里有人可以发表评论？ - Tornseglare
1
@Snorvarg 我的答案适用于任何符合HTML5标准的浏览器，只要您在iPad上运行较新版本的iOS（10+），它就应该可以工作。如果您不需要以编程方式控制视频，则可以尝试使用简单的iframe嵌入API。您可以在此处找到示例https://developers.google.com/youtube/iframe_api_reference#Examples，或查看vinayvasyani的答案。如果您仍然有问题，那么我建议您按照“如何提出一个好问题”的指南在https://stackoverflow.com/help/how-to-ask中提出新问题。 - Norman Breau
@Snorvarg 我发现这个 https://productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y，Firefox 中出现了类似的问题，并且解决方法是需要请求全屏权限。所以我敢打赌这就是为什么全屏在你的 iPad 上无法工作的原因，而不幸的是 iOS Safari 似乎不支持。另一种解决方案是添加自己的全屏按钮，然后将 iframe 播放器调整为屏幕的宽度/高度。 - Norman Breau
1
谢谢你的提示和链接。我几天前在这里添加了一个问题：https://stackoverflow.com/questions/49650040/fullscreen-button-in-embedded-youtube-player-disabled-on-ipad 但是过了一段时间，我决定像你建议的那样自己制作全屏按钮，现在它可以正常工作。 - Tornseglare
2
很棒的东西，但我遇到了错误“TypeError: YT.Player不是构造函数”，如此处所述：https://dev59.com/-VQK5IYBdhLWcg3wUOR5。 正如（唯一的）答案所指出的那样，这是由于异步脚本加载和API在调用时尚未准备好导致的。可以通过实现onYouTubeIframeAPIReady函数（并将上面代码的最后一个代码块放入其中）来避免这种情况。 - jakob.j
28

我已经为这个确切的功能创建了一个相对较小（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/

2
请问您能否解释一下如何在Angular中设置它？ - Toto Briac
@ParthaviPatel，请您在此处的GitHub上开一个问题：https://github.com/thelevicole/youtube-to-html5-loader/issues 谢谢！ - Levi Cole
2
应该在某个地方提到，这个库会向作者的服务器yt2html.com发出请求，以检索视频流src。 - Spankied
1
@Spankied 正确！4.0.1之前的版本可以直接联系YouTube API，但他们随后实施了CORS头，防止通过Ajax检索数据。然而，我的服务器仍然可以成功地发出请求，因此它充当一个非常基本的中间人。 - Levi Cole
@LeviCole 服务器是开源的，还是只有npm包？ - Matt Huggins
显示剩余3条评论
15

步骤1：在您喜爱的YouTube URL 中添加&html5=True

步骤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>

请注意，似乎有一些过期的东西。我不知道src字符串能持续多长时间。

仍在进行测试。

编辑（2011年7月28日）：请注意，此视频的src是特定于您用于检索页面源代码的浏览器的。 我认为Youtube目前会动态生成这个HTML，因此在测试中，如果我在Firefox中复制，则在Firefox中可以运行，但在Chrome等其他浏览器中则无法运行。

106
这个解决方案的失效以及它只能在特定浏览器中使用，使得它相当无用。 - pjv
1
它能播放所有的YouTube视频吗？ - Raj Pawan Gumdal
3
YouTube理论上可以随时更改所有视频的底层存储URL。上面提供的“src”属性中的URL可能长期不能保证可用。 - Chris Peters
2
是的，这是有用的信息，但听起来不太好。YouTube可能随时决定关闭对直接视频链接的访问权限。 - Oliver Moran
-4

你觉得像hooktube这样做怎么样？他们实际上并不使用视频URL作为HTML5元素，而是使用谷歌视频重定向URL来调用该视频。看看这里他们如何呈现一些随机的Despacito视频...

<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...非常烦人...

本答案中的两个链接都是我个人对这两个资源的体验。Hooktube很好，新鲜，实际上有助于避免审查和地理限制...试试看，很酷。而Youtubeinmp4现在是一个弹出式广告怪物，现在被称为ConvertInMp4...

你不需要使用外部服务，只需使用JavaScript。如果解析YouTube的“get_video_info”页面，您可以获取URL。 - myjobistobehappy
-4
如果有人看到这个问题，嵌入YouTube视频的好方法是使用embed标签，像这样： <embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">

-6

最简单的答案是由W3schools提供的。 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>
11
问题询问的是<video>标签，而不是<iframe>。 - Julio Henrique Bitencourt
-12

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

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

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>
31
“新” iframe 标签？ iframe 已经存在很久了... - Zearin
15
这不是答案的解决方案，它明确指出了视频标签而不是 iframe... - TGarrett
9
也许原贴作者不知道 iframe 标签的存在，所以他直接问了 video 标签。否则他不会问 HTML5（泛指）是否支持Youtube视频，而应该将问题限定在 video 标签上。他甚至在最后一句中问到“是否有任何解决方法？”，因此这个回答是完全有效的。 - Daniel Muñoz Parsapoormoghadam
1
为了在我的blogger.com博客中嵌入youtube.com视频，iframe是唯一方便的解决方案。此外，youtube.com生成的嵌入代码是一个iframe标签。另外，w3schools.com推荐使用iframes：http://www.w3schools.com/html/html_youtube.asp。其中未提及video标签。 - noobninja
1
以防万一有人好奇...问题在于使用视频标签不是嵌入YouTube视频的正确方法，因为公共URL并不是实际的媒体资源。这就是为什么有人建议使用iframes。尝试使用视频标签意味着您将使用可能会在未来更改的私有URL。这就像尝试访问面向对象语言中的私有成员一样。您可以在此处查看YouTube的官方文档https://developers.google.com/youtube/iframe_api_reference#Examples - Norman Breau
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接