加载 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。

加载 youtube 视频时打开网站

Open the website when a youtube video is loaded

javascript

youtube

jquery

load

youtube-api