Можно ли активировать клик по Vimeo?

Question

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

Это видео Vimeo плюс учетная запись (где разрешен фон = 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();
    });
});

Answer 1

Vimeo Promises

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

    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;

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

Наложение макета

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

• Обернуть плеер iframe (#vFrame0 в демоверсии) в родительский контейнер relpos ^? (a.k.a. .box)

• Поместите старшего брата ^? abspos ^? элемент (a.k.a. .overlay) внутри родителя с игроком iframe.

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

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

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

---

Демо

Демонстрация не работает, так как существуют конфликты между подключениями Vimeo и мерами безопасности SO. Для демонстрации работоспособности ознакомьтесь с этим поршнем или поршнем .

<!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>

---

^? relpos: position: relative | abspos position: absolute

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