Question

我想实现“懒加载”嵌入多个YouTube视频与你管视频标题。我想在开始时只加载带有youtube视频标题的视频图像缩略图，当用户点击它然后只加载视频。我有一个代码为此，但在此代码中只有youtube视频图像显示在第一个加载不显示图像上的视频标题。如何在youtube视频图像上显示标题.Below是我的代码。

<script type="text/javascript">
jQuery(document).ready(function($) {
 ( function() {

    var youtube = document.querySelectorAll( ".youtube" );

    for (var i = 0; i < youtube.length; i++) {

        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );

                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );

                            iframe.setAttribute( "frameborder", "0" );
                            iframe.setAttribute( "allowfullscreen", "" );
                            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );

                            this.innerHTML = "";
                            this.appendChild( iframe );
                } );    
    };

} )();
});
</script>

Answer 1

您只能通过带有API密钥的YouTube API从视频和其他数据中获取名称。使用此键，您可以解析Youtube-API，例如名称，通过javascript，php或您的首选语言来解析json请求。
.title是视频的名称。

这是关于Youtube，Google地图和Vimeo视频的Github项目： https://github.com/viktorbergehall/lazyframe

如何“延迟加载”嵌入多个带视频标题的YouTube视频

1 个答案: