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

Question

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

您可以使用 HTML5 嵌入 YouTube 视频吗？如果没有，是否有任何解决方法？

score 38 · Accepted Answer

这个答案不再起作用，但我正在寻找解决方案。

截至. 2015 年 2 月 2 日 24 日。有一个网站 (youtubeinmp4)允许您下载 youtube 视频.mp4 format，您可以利用它（使用一些 JavaScript）将 youtube 视频嵌入<video>标签中。这是一个实际的演示。

##优点

相当容易实施。
实际上服务器响应非常快（检索视频并不需要那么多）。
抽象（公认的解决方案，即使它工作正常，也只有在您事先知道要播放哪些视频时才适用，这适用于任何用户输入的 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>

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

score 24 · Accepted Answer

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

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

score 18 · Accepted Answer

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

score 14 · Accepted Answer

第 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>

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

还在测试自己。

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

score -3 · Accepted Answer

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

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

<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

score -4 · Accepted Answer

像钩管那样做怎么样？他们实际上并没有使用 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 到 mp3已经变成了极其赚钱的怪物，现在在一半的视频下载请求中返回 download.html……烦人……

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

score -4 · Accepted Answer

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

score -10 · Accepted Answer

在您的网站中嵌入新的 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>

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

8 回答 8

这个答案不再起作用，但我正在寻找解决方案。

Related

Reference