InvalidStateError.Видео Vimeo играет нормально, но исключение - PullRequest
Новая
       8

InvalidStateError.Видео Vimeo играет нормально, но исключение

0 голосов
/ 28 ноября 2018

Я пытаюсь заменить изображения, которые имеют атрибуты data-video1 и data-video2, в качестве идентификаторов видео и заменить их двумя видео (одно заменяет другое, а второе воспроизводится при нажатии первого видео с автоматическим воспроизведением).Все работает хорошо, но выбрасывает следующее исключение, которое нарушает мою навигацию.Не могли бы вы порекомендовать, как бы я исправил код для прослушивания и ожидания, пока видео не будет готово?

InvalidStateError: Была сделана попытка использовать объект, который не используется или более не пригоден для использования

<script src="//cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js" type="text/javascript"></script>
<script src="//player.vimeo.com/api/player.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
      $('.homepage-collage > a').each(function(index) {
        $this = $(this);
        $img = $this.find('img');

        if($img.data('video1')){

          var rand1 = Math.floor(Math.random()*100000);
          var rand2 = Math.floor(Math.random()*100000);
          var rand3 = Math.floor(Math.random()*100000);

          $img.css({'opacity':0}).parent().append('<div class="video-wrap video-wrap'+rand3+'"> <div class="trigger"></div><div class="player1_wrap"><iframe id="player'+rand1+'" src="https://player.vimeo.com/video/'+  $img.data('video1') +'?api=1&amp;player_id=player'+rand1+'&amp;autostop=0&amp;badge=0&amp;byline=0&amp;portrait=0&amp;title=0&amp;background=1&amp;loop=1" width="640" height="360" frameborder="0"></iframe></div><div class="player2_wrap"> <iframe id="player'+rand2+'" src="https://player.vimeo.com/video/'+ $img.data('video2') +'?api=1&amp;playsinline=false&amp;player_id=player'+rand2+'&amp;autostop=1&amp;badge=0&amp;byline=0&amp;portrait=0&amp;title=0&amp;" width="640" height="360" frameborder="0"></iframe> </div> </div>');

          $this.fitVids();

          var player1 = new Vimeo.Player($('#player'+rand1+''));
          var player2 = new Vimeo.Player($('#player'+rand2+''));

          $(document).on('click', '.video-wrap'+rand3+' .trigger', function(event) {
            var $trigger = $(this);
            $trigger.hide();
            player1.pause();
            $trigger.siblings('.player1_wrap').fadeOut('fast');
            $trigger.siblings('.player2_wrap').fadeIn('fast');
            player2.play();
          });

          player2.on('finish', function () {
            $trigger = $('.video-wrap'+rand3+' .trigger');
            $trigger.show();
            $trigger.siblings('.player2_wrap').fadeOut('fast')
            $trigger.siblings('.player1_wrap').fadeIn('fast');
            player1.play();
          });
        }

      });
    });
</script>

Любое руководство высоко ценится!Большое спасибо!

1 Ответ

0 голосов
/ 28 ноября 2018

Я предполагаю, что вы используете Firefox, потому что это известная проблема в Firefox, которая была зарегистрирована в нашем репозитории (https://github.com/vimeo/player.js/issues/344). Однако, я не совсем уверен, как это может нарушить вашу навигацию, поскольку во всех наших тестах этоошибка, похоже, не оказывает влияния. Скорее всего, это проблема с вашим кодом, а не Vimeo API. Однако эта информация будет полезна для того, чтобы потенциально позволить мне помочь вам больше.

1) ЧтоВы имеете в виду "сломать навигацию"?Можете ли вы привести пример страницы или веб-страницу или JSFiddle?

2) Можете ли вы попробовать другой браузер - Chrome / Safari / Edge?Ошибка не должна появиться там.Если это не так и проблема остается, то эта ошибка не имеет ничего общего с вашей проблемой.

...