Как проигрывать видео при открытии аккордеона и как паузить при скрытии аккордеона?

Question

[z_u_l]

Здравствуйте! Есть такой вопрос. Если открыть аккордеон, потом нажать на плей у видео, затем скрыть аккордеон, то видео все равно будет играть в фоне. Понимаю, что нужно как-то давать player.play() - если у блока есть класс active и player.pause() - если отсутствует класс active.

Что нужно сделать чтобы при открытии/скрытии аккордеона видео проигрывалось и останавливалось? Спасибо.

Ссылка на пример

Answer 1

[0xD34F]

<div class="accordionFaq"></div>

const playersOptions = [
  { source: '...' },
  { source: '...' },
  ...
];

$('.accordionFaq').html(playersOptions.map((n, i) => `
  <div class="accordionFaq-item">
    <div class="accordionFaq-head js-accordionFaq-head">
      Video #${i}
    </div>
    <div class="accordionFaq-body">
      <div id="player${i}"></div>
    </div>
  </div>
`).join('')).on('click', '.accordionFaq-head', function(e) {
  const index = $(this).closest('.accordionFaq-item').index();

  $('.accordionFaq-item', e.delegateTarget).each(function(i) {
    const
      $this = $(this),
      isClicked = i === index,
      active = isClicked && !$this.hasClass('active');

    $(this)
      .toggleClass('active', active)
      .find('.accordionFaq-body')
      [isClicked ? 'slideToggle' : 'slideUp']();

    playersOptions[i].player[active ? 'play' : 'pause']();
  });
});

playersOptions.forEach((n, i) => {
  n.player = new Clappr.Player({
    source: n.source,
    parentId: `#player${i}`,
  });
});

Comments

[z_u_l]

Огромное спасибо!!!