Возможен ли запуск по клику на видео Vimeo?

Можно ли инициировать действие по клику, если для видео установлено значение background=1 (без элементов управления)?

Это видео Vimeo плюс учетная запись (где допускается background=1).

По сути, у меня есть видео Vimeo без элементов управления, настроенных на цикл и автовоспроизведение с громкостью 0. В моей реализации есть значок, наложенный поверх видео в центре. При нажатии устанавливается полная громкость, а значок скрывается.

После того, как громкость установлена ​​на 1, а значок скрыт, человек, просматривающий видео, должен иметь возможность щелкнуть видео, чтобы отключить его (установите громкость на 0).

Проблема в том, что я не могу понять, как настроить таргетинг на этот клик. Я попытался прикрепить .on('click') к iframe, его родителю и насколько я могу подняться по цепочке, но за пределами этого первого щелчка значка щелчок никогда не регистрируется.

Может ли кто-нибудь предложить какие-либо указатели о том, как настроить таргетинг на клик по видео iframe Vimeo (или его родительскому контейнеру и т. д.)?

Вот мой код до сих пор:

var iframe = document.getElementById('vimeo-video');
var player = new Vimeo.Player(iframe);

player.ready().then(function() {
    var volume = 0
    player.setVolume(volume);

    $('#vimeo-video-play').on('click', function(event) {
        if (volume > 0) {
            player.setVolume(0);
        } else {
            player.setVolume(1);
        }

        $('#vimeo-video-play').hide();
    });
});

javascript jquery vimeo-api vimeo-player
person Appl3s    schedule 27.06.2018    source источник
comment
Если вы используете vimeo API, взгляните на github.com/vimeo/player. .js#events дает ли какое-либо из этих событий то, что вам нужно?   -  person Isaac    schedule 27.06.2018
comment
Спасибо, @Isaac, но нет, к сожалению, ни один из них не привязан к событию клика. Спасибо, в любом случае.   -  person Appl3s    schedule 27.06.2018
comment
Это неудачно. Удачи, извините, что не смог помочь.   -  person Isaac    schedule 27.06.2018
comment
Кажется, что единственным способом полноэкранного режима является наличие элементов управления, поскольку player.js не имеет метода, связанного с полноэкранным режимом.   -  person JLF    schedule 27.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Vimeo-обещания

Похоже, что если вы используете Vimeo API, вы должны вернуть Promise. Если вы просто хотите выполнить простую задачу, такую ​​как управление громкостью, в документации приведен этот пример:

 
    player.setVolume(0.5).then(function(volume) {
        // volume was set
    }).catch(function(error) {
        switch (error.name) {
            case 'RangeError':
                // the volume was less than 0 or greater than 1
                break;
    
            default:
                // some other error occurred
                break;
        }
    });

Не просто, и это перебор. Глядя на него, это не очевидно, но если вы видите then(), await async, new Promise, вы можете с уверенностью 99,9% сказать, что обещание будет возвращено. Я недостаточно внимательно изучил player.js, но я думаю, что каждый метод упакован в промисе, насколько я могу судить, мы можем просто вернуть метод, не используя всю эту лишнюю хрень. Итак, сравните приведенный выше код со следующим:

var sVol = player.setVolume(1); return sVol;

Поэтому я считаю, что при вызове метода Vimeo API мы можем вернуть функцию как значение. Нет работы, связанной с тем, что именно представляет собой это значение, потому что оно будет либо разрешено, либо отклонено. Обещание также неизменяемо, поэтому возврат самой функции должен быть гарантированным решением (в отношении методов Vimeo, а не обещаний в целом).

Макет наложения

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

  • Поместите проигрыватель iframe (#vFrame0 в демо) в родительский контейнер relpos???? (он же .box).

  • Поместите более старый родственный элемент???? abspos???? (также известный как .overlay) внутри родителя с помощью проигрывателя iframe.

  • Установите старшего брата выше проигрывателя, установив его z-index в l больше, чем проигрыватель iframe, и необходимые свойства CSS (см. демо CSS для .overlay), чтобы убедиться, что старший брат полностью закрывает проигрыватель iframe от края до края.

  • Зарегистрируйте событие щелчка в элементе наложения, чтобы, когда игрок игнорирует событие щелчка, событие возвращалось к более старому элементу наложения того же уровня. Элемент overlay теперь является своего рода прокси и будет запускать обратный вызов:

      var sVol = player.setVolume(1); return sVol

Демо

Эта демонстрация не работает из-за конфликта между подключениями Vimeo и мерами безопасности SO. Чтобы ознакомиться с работающей демонстрацией, просмотрите этот Plunker или этот Планкер.

<!DOCTYPE html>
<html>

<head>
  <base href="https://player.vimeo.com/api/demo">
  <meta charset='utf-8'>
  <style>
    .box {
      display: table;
      border: 3px dashed red;
      position: relative;
    }
    
    .overlay {
      cursor: pointer;
      display: table-cell;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      min-height: 100%;
      z-index: 1;
    }
    
    .overlay::before {
      position: absolute;
      cursor: pointer;
      display: block;
      content: '????';
      font-size: 2em;
      width: 2em;
      height: 2em;
      color: cyan;
      opacity: 0;
      transition: opacity .5s ease 3s;
    }
    
    .overlay:hover::before {
      opacity: 1;
      transition: .5s ease;
    }
    
    .mute.overlay::before {
      content: '????';
    }
  </style>
</head>

<body>

  <figure class='box'>
    <figcaption class='overlay mute'></figcaption>
    <div id='vFrame0' data-vimeo-id="76979871" data-vimeo-autoplay data-vimeo-background></div>
  </figure>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='https://player.vimeo.com/api/player.js'></script>
  <script>
    var player = new Vimeo.Player('vFrame0', options);
    var options = {
      mute: true
    };

    $('.overlay').on('click', function(e) {
      var state = $(this).hasClass('mute') ? player.setVolume(1) : player.setVolume(0);
      $(this).toggleClass('mute');
      return state;
    });
  </script>
</body>

</html>

????отношения: position: relative | абстракции position: absolute

????старший родственный элемент элемент, расположенный перед элементом, на который делается ссылка.

person zer00ne    schedule 27.06.2018