Question

我需要在网站上嵌入Facebook视频，我的目的是加载缩略图并仅在访问者点击缩略图时加载嵌入。这样可以减少前期加载时间，从而提高整体站点性能。

我尝试使用一个脚本来检测何时单击父元素（“.bbfb-video”）并插入嵌入的视频。

注意：jQuery正在使用中。

<div class="video bbfb-video" id="10154009776186729" data-link="https://www.facebook.com/facebook/videos/10154009776186729/">
    <img class="bbfb-thumb" src="https://via.placeholder.com/640x360?text=video" alt="thumbnail"/>
</div>
<script>
(function() {
    if ($('.bbfb-video').length === 0) return;
    $('.bbfb-video').each(function() {
         var fb = this,
         id = this.id;
        $(fb).click( function() {
            var href = $(this).attr('data-link');
            $(this).empty();
            $(this).append('<div class="fb-video" data-allowfullscreen="true" data-href="'+href+'" data-width="500" data-show-text="false"></div>');
            //Re-parse the parent
            FB.XFBML.parse(document.getElementById(id));
            //Autoplay
            FB.Event.subscribe('xfbml.ready', function(msg) {
                if (msg.type === 'video') {
                    msg.instance.play();
                }
            });
        });
    });
})();
</script>

这会创建新的div <div class="fb-video" data-allowfullscreen="true" data-href="https://www.facebook.com/facebook/videos/10154009776186729/" data-width="500" data-show-text="false"></div>，不显示任何视频。

错误为Uncaught ReferenceError: FB is not defined

Answer 1

您的代码适合我：link。也许你不是initializing the facebook API正确吗？

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.12'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

显示仅在用户点击缩略图

1 个答案: