Rutube как я могу поработать с api руборда, в частности интересуют pause и play?

Question

Скажем у меня есть три видео, надо что бы при клике на блоке с видео .zv_content все остальные видео, если они проигрываются - становились на паузу.

      <div>
        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/0e69b45e4ee399c38af30d6be2f87ab5/?api=1" 
            frameborder="0" 
            allowfullscreen
          ></iframe>
        </div>
      </div>
      <div>
        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/90a62a421a55411f711b694a163d4356/?api=1" 
            frameborder="0" 
            allowfullscreen
          ></iframe>
        </div>
      </div>
      <div>
        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/e8cf2d8185ef0995e8beb8109bed95db/?api=1" 
            frameborder="0" 
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>

Answer 1

Есть небольшая проблема. Видосы перехватывают события кликов и не пробрасывают в родительские элементы. Пришлось закрыть их прозрачным div и ловить события по нему. Это исключает управление родными кнопками видоса.

И, увы, тут не заработает, надо копировать к себе.

//Делаем массив видосов
var videos=document.querySelectorAll('.zv_content')
//log(videos)
//Навешиваем событие на общий контейнер
document.getElementById('zv_container')
    .addEventListener('click', onClick);


function onClick(e){
    log('click');
    //Отсекаем чужие события
    if(!e.target.classList.contains('btn')) return;
    //Ищем родительский zv_content
    let zv_self=e.target.closest('.zv_content')
    //log(zv_self)
    for(zv of videos){
        //log(zv, zv_self==zv)
        let iframe=zv.querySelector('iframe')
        //log(iframe)

// Управление плеером взято тут
// https://rutube.ru/info/embed/

        if(zv_self==zv)
            iframe.contentWindow.postMessage(JSON.stringify({type: 'player:play',data: {}}), '*');
        else
            iframe.contentWindow.postMessage(JSON.stringify({type: 'player:pause',data: {}}), '*');
    }
}

function log(...a){
    console.log(...a);
}

.zv_content {
  position: relative;
}

.btn {
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(100% - 40px);
  background: #FF000020; /* оставил чуть-чуть для наглядности, потом можно поставить #00000000 */
}

<div id="zv_container">
        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/0e69b45e4ee399c38af30d6be2f87ab5" 
            frameborder="0" 
            allowfullscreen
            webkitAllowFullScreen
            mozallowfullscreen
            allow="autoplay"
            autoplay=true
          ></iframe>
          <div class="btn"></div>
        </div>


        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/90a62a421a55411f711b694a163d4356" 
            frameborder="0" 
            allowfullscreen
            webkitAllowFullScreen
            mozallowfullscreen
            allow="autoplay"
            autoplay=true
        ></iframe>
        <div class="btn"></div>
        </div>

        <div class="zv_content">
          <iframe 
            src="https://rutube.ru/embed/e8cf2d8185ef0995e8beb8109bed95db" 
            frameborder="0" 
            allowfullscreen
            webkitAllowFullScreen
            mozallowfullscreen
            allow="autoplay"
            autoplay=true
          ></iframe>
          <div class="btn"></div>
        </div>

</div>

БЛОГ НА HUSL

Rutube как я могу поработать с api руборда, в частности интересуют pause и play?

Ответы (1 шт):