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

Question

我正在尝试将YouTube视频源添加到HTML5 <video>标记中,但它似乎不起作用.经过一些谷歌搜索,我发现HTML5不支持YouTube视频网址作为来源.

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

Answer 1

这个答案不再适用,但我正在寻找解决方案.

截至.2015/02/24.有一个网站(youtubeinmp4),允许您下载YouTube视频.mp4 format,你可以利用这个(用一些JavaScript)来摆脱在<video>标签中嵌入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)\/([\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>.

希望能帮助到你!:)

Answer 2

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

Answer 3

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

Answer 4

I have created a realtively small (4.89 KB) javascript library for this exact functionality.

Found on my GitHub here: https://github.com/thelevicole/youtube-to-html5-loader/

It's as simple as:

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