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

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

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

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

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

截至。2015/2/24。有一个网站（youtubeinmp4），可让您下载中的youtube视频.mp4 format，您可以利用此网站（带有一些JavaScript）来逃避将youtube视频嵌入<video>标签中的麻烦。这是此操作的演示。

优点

• 相当容易实现。
• 实际上，服务器反应非常快（检索视频并不需要那么多）。
• 抽象（公认的解决方案，即使它工作正常，也只有在您事先知道要播放哪些视频的情况下才适用，这适用于任何用户输入的网址）。

缺点

• 显然，这取决于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>

使用缩短的url youtu.be作为src直接在<video>标记中的属性，这种情况不太常见，但相当小。

希望能帮助到你！:)

的<video>标签是指负荷支持的格式（其可以通过浏览器不同）的视频。

YouTube嵌入链接不仅是视频，还通常是包含逻辑的页面，这些逻辑可检测用户支持的内容以及如何使用HTML5或Flash或其他基于用户PC上可用插件的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
    }
});

如何像hooktube那样做呢？他们实际上并未将视频网址用于html5元素，而是调用该视频的Google视频重定向器网址。看看这里是他们呈现一些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到mp3变成了货币化的怪物，现在一半的视频下载请求都返回了download.html。

该答案中的2个链接是我对这两种资源的亲身经历。hooktube如何漂亮又新鲜，实际上有助于避免审查和地理限制。.看看，这很酷。youtubeinmp4是一个弹出式怪物，现在称为ConvertInMp4 ...

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

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

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