使用JavaScript更快地嵌入YouTube

时间：2025-01-22 12:10:23

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

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

通过无害的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 /vi/<youtube-video-id>/<youtube-thumbnail> （其中甚至可以简称为 ，如果你比较喜欢）。

我们感兴趣的是：

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

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

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

HTML

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

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

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

CSS

在作为示例的两个视频中，图片比率为16：9，这将返回带有水平黑带的缩略图。 要在显示此缩略图时隐藏它们，请在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()?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!) {
        // IE8 support
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = ("*");
            for(var i=0,j=; i<j; i++)
                if((els[i].className))(els[i]);
            return a;
        }
        var videos = getElementsByClassName(,"youtube");
    } else {
        var videos = ("youtube");
    }

    var nb_videos = ;
    for (var i=0; i<nb_videos; i++) {
        // Based on the YouTube ID, we can easily find the thumbnail image
        videos[i]. = 'url(/vi/' + videos[i].id + '/)';

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

        videos[i].onclick = function() {
            // Create an iFrame with autoplay set to true
            var iframe = ("iframe");
            var iframe_url = "/embed/" +  + "?autoplay=1&autohide=1";
            if (("data-params")) iframe_url+='&'+("data-params");
            ("src",iframe_url);
            ("frameborder",'0');

            // The height and width of the iFrame should be the same as parent
              = ;
             = ;

            // Replace the YouTube thumbnail with YouTube Player
            (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(/vi/' +  + '/)');
    
        // Overlay the Play icon to make it look like a video player
        $(this).append($('<div/>', {'class': 'play'}));
    
        $(document).delegate('#'+, 'click', function() {
            // Create an iFrame with autoplay set to true
            var iframe_url = "/embed/" +  + "?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: /faster-youtube-embeds-javascript/

相关文章