yt api, jquery и pagination - странное поведение - PullRequest
Новая
       1

yt api, jquery и pagination - странное поведение

0 голосов
/ 01 декабря 2018

Я пытаюсь сделать видеостену с несколькими фреймами, видео должно воспроизводиться, когда пользователь наводит курсор на фрейм видео.Все, что я установил в коде, работает - я могу вызвать currentPlayer.seekTo (10), и он перемещает ползунок, но currentPlayer.playVideo () не работает.

И странная часть, чем если я наведу курсор накарта - это создает или выбирает игрока из массива и устанавливает его в глобальный vriable, и я вызываю этого игрока вручную из консоли с помощью 

currentPlayer.playVideo()

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

html часть кода здесь, но в корзине она вообще не работает, просто для справки, как она выглядит.https://jsbin.com/bavexujome/edit?html,js,output мой JS выглядит так: 

//yt api boilerplate

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

// my helper variables

var players = {}
var player
var currentPlayerId = null
var currentPlayer = null

// I have cards with iframes inside - when user hovers on a card 
// then I check if I have a player for that card in my players array 
//and if not I create it and set it to global variable
// I also try to start that video first time I got the autoplay 
// variable set - dont work and it there is a player I try to call
// .playvideo() on it - also does not work 
// all variables are set proper - I can console.log them

$(document).ready(function(){
  $('#hg-container').on("mouseenter", ".card", function(){
    currentPlayerId = $(this).find('iframe').attr('id');
    player = $(this).find('iframe')[0];

    if (!players[currentPlayerId]){
      players[currentPlayerId] = new YT.Player(player, {
        playerVars: { 'autoplay': 1 },
        events: {'onReady': onPlayerReady }
      });
    }
    else{
      currentPlayer = players[currentPlayerId]
      currentPlayer.playVideo();
    }
  });

  //when user leaves the card video should stop

  $('#hg-container').on("mouseleave", ".card", function(){
    currentPlayer.pauseVideo();
    currentPlayer = null;
  });
});

  //this gets called when video loads - and seekTo(10) works
  // but playVideo() don't

function onPlayerReady(event) {
  currentPlayer = players[currentPlayerId]
  currentPlayer.seekTo(10);
  currentPlayer.playVideo();
}

function onYouTubeIframeAPIReady(){
  console.log("ready")
}

Есть какие-нибудь подсказки?Я думаю, что это может быть проблема с областью действия, и когда я вызываю это из консоли js, область видимости каким-то образом изменяется, и тогда это работает

...