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

 类似资料: