如何将Youtube视频源显示为HTML5视频标签?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (149)

我试图将YouTube视频源添加到HTML5 <video>代码中。经过一些Google搜索后,我发现HTML5不支持YouTube视频网址作为来源。

可以使用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>

不知道src字符串将工作多久。

此视频src特定于用于检索页面源的浏览器。我认为Youtube动态地(至少当前)生成这个HTML,所以在测试中,如果我复制到Firefox中,这在Firefox中可用,但不在Chrome中。

用户回答回答于

有一个网站(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>

不太常见但较小,直接在标签中使用youtube.be缩短的url和src属性<video>

扫码关注云+社区

领取腾讯云代金券