加载 youtube 视频时打开网站

Question

我在首页的背景中嵌入了这个自动播放的 youtube 视频，我想要做的是保持加载页面继续运行，直到视频完全加载，以便人们在他们离开时可以看到它正在播放在这里的问题是即使视频仍在加载中，加载页面也会打开。

我已经为加载页面设置了加载功能，假设它在页面加载后执行操作？有没有办法用这个加载功能来检测 youtube 视频是否已完全加载？

这是youtube的js代码

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('top_video', {
      width: '100%',
      videoId: 'ZHe75UFH6uE',
      playerVars : {
            'loop' : 1,
            'autoplay' : 1,
            'mute' : 1,
            'rel' : 0,
            'showinfo' : 0,
            'controls' : 0,
            'modestbranding' : 1,
            'iv_load_policy' : 3,
            'cc_load_policy' : 1,
            'origin': location.protocol + '//' + location.hostname + "/"
        },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  var interval_is_stopped = false;
        setInterval(function (){
          var current_time = event.target.getCurrentTime();

          if (current_time > 81.9 && !interval_is_stopped) {
            interval_is_stopped = true;
            jQuery('#top_video').fadeTo(400, 0.7, function(){
              player.seekTo(0);
              jQuery(this).fadeTo(400, 1, function(){
                interval_is_stopped = false;
              });
            });
          }
        }, 10);
}

 var done = false;
      function onPlayerStateChange(event) {
        if (event.data==YT.PlayerState.CUED && !done) {
          done = true;
        }
      }

  $('#pauseplay').on('click', function(){
    var isMuted = player.isMuted();
    if( $(this).hasClass('sound_off_active') && isMuted ){
      $(this).removeClass('sound_off_active');
      $(this).addClass('sound_on_active');
      player.unMute();
    } else {
      $(this).addClass('sound_off_active');
      $(this).removeClass('sound_on_active');
      player.mute();
    }

  });


$(function () {
    $('a.disabled').on("click", function (e) {
        e.preventDefault();
    });
});

}

这里是加载js

var $delayTime = 3000;

$(window).on('load', function(){

    var $loadingAnim = $('.loadingAnim'),
        $body = $('body');

    setTimeout( function(){

        $body.addClass('loaded');

        $loadingAnim.find('.loadingAnim_line').on('transitionend', function( e ){
            $(this).parent().remove();
        });

    }, $delayTime );
});

这是我的网站

https://www.run-journey.com/

我需要在这个网站上显示一个视频

https://re-creation.co.jp/

Answer 1

我会放弃设置的超时时间，让动画一直运行，直到视频加载（提示），类似于：

function onPlayerStateChange(event) {    
    if(event.data === 5) {          
        hideAnimation();
    }
}

function hideAnimation() {
    $('.loadingAnim').find('.loadingAnim_line').on('transitionend', function (e) {
        $(this).parent().remove();
    });
}

更多关于玩家状态的信息here。