使用JavaScript更快地嵌入YouTube

尚棋

2023-12-01

我们希望访问者尽快获取我们的内容，这意味着内容必须轻巧，并且请求数量最少。但是我们想让用户留在我们的页面上，并得到娱乐。这是嵌入视频进入场景的地方。

视频说明了我们的文字内容，使生活栩栩如生，并且通常由第三方提供。还有什么要问的？嗯，这有一个隐藏的价格标签： 即使访客没有观看视频，下载视频的速度又慢又繁重 。

通过无害的iframe在页面上调用的一个简单视频最多可以添加6个HTTP请求和多达450kb的内容。我在本文中提出的解决方案可以将这些请求的数量减少到1个请求，每个视频大约50kb，以及几个字节的JavaScript（如果您不喜欢香草味，则位于jQuery库的顶部）。

你知道吗？此解决方案不是新的。之前由Amit Agarwal于2013年4月提出。

那么，这是什么把戏？

在Amit的解决方案中，JavaScript是在文档加载时解析DOM的，每次对YouTube视频的调用（通过特殊的div，不是常规的iframe）都由缩略图预览代替，单击缩略图时，iframe会附加到该缩略图。

这样，我们仍然可以通过第三方服务器获得漂亮的预览缩略图，该缩略图只是完整视频播放器重量的一小部分。仅当实际观看视频时才加载视频播放器。

我的小附加值

对于那些感兴趣的人，我用纯JavaScript和jQuery重写了Amit的代码。我将原始注释保留在代码中，以使其尽可能地易于理解。我的版本在HTML5数据参数中添加了一项新功能，使您可以向YouTube URL添加任何参数以自定义视频。

YouTube提供了一系列参数，以显示和隐藏控件，品牌和信息，以及设置视频质量或视频的起始帧（以及其他信息）。

控件：将其设置为0，并且图层控件不会显示在视频播放器上。
modestbranding ：将其设置为1，YouTube徽标将从控制栏中消失。
rel ：将其设置为0，并且初始视频的播放结束时将不显示任何相关视频。
showinfo ：将其设置为0，在视频开始播放之前，播放器将不会显示诸如视频标题和上传者之类的信息。
start ：将其设置为秒数，然后播放器从此时开始（或者从最近的关键帧开始）播放视频。
vq ：将其设置为所需的视频质量（如果支持）（例如： hd720质量可用时为hd720 ）

在点击事件上添加YouTube iframe时，会给一些参数指定值，即autoplay （我们希望视频在单击缩略图后立即开始autoplay ）和autohide （隐藏视频进度条，并在没有互动时由播放器控制）检测到）。

支持的YouTube缩略图

每个YouTube视频都附带一个生成的图像列表。您可以通过以下网址访问它们：URL http://img.youtube.com/vi/<youtube-video-id>/<youtube-thumbnail> （其中img.youtube.com甚至可以简称为i.ytimg.com ，如果你比较喜欢）。

我们感兴趣的是：

default.jpg（默认版本，120px x 90px）
hqdefault.jpg（高质量版本，480px×360px）
mqdefault.jpg（中等质量版本，320px×180px）
sddefault.jpg（标准定义版本，640px×480px）
maxresdefault.jpg（最高分辨率版本，1.280px×720px）

例如，请参见此URL ，您可以使用该URL来处理这些值以查看不同的图像选项。

在以下代码中，我们使用sddefault.jpg缩略图。根据您的需求和用户屏幕的功能，可以用任何列出的受支持格式替换它。

HTML

HTML代码设置YouTube视频ID，设置视频大小（宽度和高度）的样式，并在需要时列出Youtube URL参数。

<div class="youtube"
     id="fsrJWUVoXeM" 
     style="width: 500px; height: 281px;">
</div>

<div class="youtube" 
     id="lR4tJr7sMPM" 
     data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720"
     style="width: 640px; height: 360px;">
</div>

CSS

在作为示例的两个视频中，图片比率为16：9，这将返回带有水平黑带的sddefault.jpg缩略图。要在显示此缩略图时隐藏它们，请在background-position属性中设置center值，同时在HTML div标签中内联设置图片大小，例如style="width:500px;height:281px;" 。这样，可以在同一页面上显示不同的视频大小。

告诉用户内容不只是图片的播放图标被添加到缩略图顶部的一层中，并具有不透明过渡以突出显示它。我们在这里使用了一个数据URI base64编码的png（来自IconFinder ），该png保存了HTTP请求并工作到IE8。

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}

.youtube .play {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: all 0.2s ease-out;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

香草JavaScript实现

由于没有依赖性和最快的实现，原始JavaScript版本使用了我所能找到的最小的DOM就绪代码。

仍然必须考虑浏览器差异，例如IE8中缺少对getElementsByClassName方法的支持。

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // IE8 support
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }

    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
        // Based on the YouTube ID, we can easily find the thumbnail image
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';

        // Overlay the Play icon to make it look like a video player
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);

        videos[i].onclick = function() {
            // Create an iFrame with autoplay set to true
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');

            // The height and width of the iFrame should be the same as parent
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;

            // Replace the YouTube thumbnail with YouTube Player
            this.parentNode.replaceChild(iframe, this);
        }
    }
});

这是运行中的代码的演示：

请参阅CodePen上的SitePoint （ @SitePoint ）用JavaScript嵌入YouTube优化的笔。

jQuery实现

虽然在我眼中更具表现力，并且具有更广泛的浏览器支持，但jQuery实现附带了整个jQuery库的价格和稍慢的性能。

"use strict";
$(function() {
    $(".youtube").each(function() {
        // Based on the YouTube ID, we can easily find the thumbnail image
        $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
    
        // Overlay the Play icon to make it look like a video player
        $(this).append($('<div/>', {'class': 'play'}));
    
        $(document).delegate('#'+this.id, 'click', function() {
            // Create an iFrame with autoplay set to true
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
    
            // The height and width of the iFrame should be the same as parent
            var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })
    
            // Replace the YouTube thumbnail with YouTube HTML5 Player
            $(this).replaceWith(iframe);
        });
    });
 });

这是jQuery版本的演示：

请参阅CodePen上的SitePoint （ @SitePoint ）编写的 YouTube YouTube嵌入优化笔（jQuery版）。

最终结果

现在，让我们谈谈我们在现实世界中的收获。

此解决方案已在此页面上实施，这是一篇包含3个嵌入式YouTube视频的文章。结果如下：

在实施该解决方案之前，我们下载了20个HTTP请求和636.2kb的内容，耗时为2.22s（加载时为3.59s）。
实施后，我们处理了17个请求，370.7kb和1.05s（负载：733ms）。
这意味着请求量减少了15％，网页的亮度降低了41％，速度提高了52％（加载：速度提高了80％）。

即使只有一个嵌入式YouTube视频（如下一页，这是我们的下一个示例），结果也相当不错。这是单视频页面的结果：

在实施该解决方案之前，我们下载了20个HTTP请求和684.4kb的内容，这些内容耗时2.13秒（加载2.14秒）。
实施后，我们减少到17个请求，322.4kb和1.24s（加载时间：975ms）。
这意味着我们最终减少了15％的请求，网页减少了53％，速度提高了42％（加载：速度提高了54％）。

结论

最后，我想我们都同意，将页面重量从40％减少到50％值得那小段代码，您不觉得吗？

如果您对代码有任何想法，或者想对其进行改进，请随时在CodePen上添加代码或在注释中分享您的观点。

本文还提供法文，西班牙文和葡萄牙文。

From: https://www.sitepoint.com/faster-youtube-embeds-javascript/

使用JavaScript更快地嵌入YouTube

那么，这是什么把戏？

我的小附加值

支持的YouTube缩略图

HTML

CSS

香草JavaScript实现

jQuery实现

最终结果

结论

相关阅读

相关文章

相关问答

相关文档