youtube iframe api, останавливающее видео, когда другое играет - PullRequest
Новая
       91

youtube iframe api, останавливающее видео, когда другое играет

0 голосов
/ 08 мая 2020

У меня есть слайдер с несколькими видео. Я хотел бы иметь возможность останавливать видео (если оно воспроизводится) при воспроизведении другого.

Я не эксперт js, поэтому у меня проблемы с его работой.

Я создал эту ручку: https://codepen.io/vlrprbttst/pen/eYpMrmB?editors=1010 в качестве отправной точки, но я понятия не имею, как включить go. Я предполагаю, что эта часть имеет какое-то отношение к тому, что я ищу: 

events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }

, но я не уверен, как ее использовать: /

Я использовал метод, который не всегда работает, и он полагается на сложную систему с невидимой крышкой iframe, которая запускает воспроизведение / паузу видео с помощью jquery, но это не всегда работает (вы можете увидеть это здесь: https://codepen.io/vlrprbttst/pen/vxrWzQ). Я искал в Интернете, но все, что я могу найти, - это одновременное воспроизведение нескольких видео.

есть ли какие-либо предложения о том, как определить воспроизведение видео и остановить его, если на той же странице воспроизводится другое? с или без jquery подойдет.

заранее большое спасибо

1 Ответ

1 голос
/ 10 мая 2020

Я бы посоветовал вам создать свои проигрыватели YouTube и хранить каждый из них в массиве. Таким образом, вы всегда можете l oop по каждому из них в обратном вызове и контролировать то, что должно происходить.

Сначала создайте пустой массив для хранения игроков и (необязательно) массив, содержащий объект с идентификатором видео и элементом для создания проигрывателя. 

let youtubePlayers = [];
const youtubeVideosSources = [
  {
    id: 'M7lc1UVf-VE',
    player: 'player1'
  },
  {
    id: 'VFQB1zE9zYU',
    player: 'player2'
  }
];

В вашем готовом обратном вызове используйте метод map() массива с идентификаторами и проигрывателями, чтобы создать новый массив проигрывателей YouTube и сохраните их в пустом массиве, который вы создали ранее. Или в этом случае перезапишите значение переменной. 

function onYouTubeIframeAPIReady() {
  youtubePlayers = youtubeVideosSources.map(({ id, player }) => new YT.Player(player, { 
    height: '360',
    width: '640',
    videoId: id,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  }));
}

Затем в onPlayerStateChange обратном вызове l oop над каждым игроком и остановите его, если он не является активированным в данный момент игроком и фактически играет . Вы можете проверить состояние каждого игрока с помощью метода getPlayerState(). 

function onPlayerStateChange(event) {
  const playing = YT.PlayerState.PLAYING;
  if (event.data === playing) {
    for (const player of youtubePlayers) {
      if (player !== event.target && player.getPlayerState() === playing) {
        player.stopVideo();
      }
    }
  }
}
...