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

我正在尝试将YouTube视频源放入HTML5<video>标签中，但它似乎不起作用。经过一些谷歌搜索，我发现HTML5不支持YouTube视频网址作为来源。您可以使用HTML5嵌入YouTube视频吗？如果没有，是否有任何解决方法？

已邀请:

6 个回复

第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/02/24。有一个网站（youtubeinmp4）允许您下载.mp4 format的YouTube视频，您可以利用此功能（通过一些JavaScript）将you0ѭ标签中的YouTube视频嵌入其中。这是一个实际的演示。优点相当容易实现。实际上服务器响应速度非常快（检索视频并不需要那么多）。抽象（已接受的解决方案，即使它正常工作，只有在您事先知道要播放哪些视频时才适用，这适用于任何用户输入的网址）。缺点它显然取决于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)/([wW]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch?v=|[wW]+/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>

不太常见但相当小，使用youtube.be缩短的url和src属性直接在<video>标签中。希望能帮助到你！ :)

垫歌蝎降凤

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

蓄荣糖些

通过在您的网站中嵌入新的iframe标记，代码将自动检测您是否使用支持HTML5的浏览器。嵌入YouTube视频的iframe代码如下，只需复制视频ID并替换为以下代码：

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

纤洞需匪

怎么样就像hooktube那样做呢？他们实际上并没有使用html5元素的视频网址，而是调用该视频的谷歌视频重定向网址。看看这里是如何呈现一些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 ...烦人... 这个答案中的2个链接是我个人使用这两种资源的经历。 hooktube如何漂亮和新鲜，实际上有助于避免审查和地理限制..检查出来，这是非常酷的。而youtubeinmp4是一个现在称为ConvertInMp4的弹出怪物......

糖固傻染

<iframe allowfullscreen="true"
         allowscriptaccess="always"
         frameborder="0"
         height="100%"
         width="100%"
         scrolling="no"
         src="//www.youtube.com/embed/VIDEO_ID">
</iframe>

要回复问题请先登录或注册

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

6 个回复

发起人

embedded_video

问题状态

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

与内容相关的链接

6 个回复

发起人

embedded_video

问题状态