Vimeo承诺

Question

如果视频设置为background = 1（没有控件），是否可以触发点击动作？

这是一个Vimeo视频以及一个帐户（允许background = 1）。

从本质上讲，我有一个Vimeo视频，没有设置为循环播放和自动播放的控件（音量为0）。我的实现在视频顶部的中间位置有一个图标。单击后，它将设置为“全音量”，并且图标被隐藏。

将音量设置为1并且隐藏图标后，观看视频的人应该可以选择点击视频以使其静音（将音量设置为0）。

问题是我无法弄清楚如何定位此点击。我尝试将.on（'click'）附加到iframe，iframe的父级，并尽其所能地将链条附加到链上，但超出该图标的第一次单击范围，则该单击从未被注册。

任何人都可以提供有关如何定位Vimeo iframe视频（或其父容器等）的点击的指针吗？

到目前为止，这是我的代码：

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承诺

看来，如果使用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的了解还不够深，但是我认为每种方法都包装在Promise中，据我所知，我们可以不使用所有多余的废话就返回该方法。因此，将上面的代码与以下代码进行比较：

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

因此，我相信在调用Vimeo API方法时，我们可以将函数作为值返回。没有涉及该值到底是什么的工作，因为它将被解决或拒绝。 Promise也是不可变的，因此返回函数本身应该是一个有保证的解决方案（关于Vimeo方法，而不是一般的Promises）。

重叠式布局

您需要单击iframe外部的元素，而不是单击填充有视频播放器的iframe来执行除自定义回调以外的其他100项任务。作为没有控件的背景视频，您非常有限。我建议使用一个元素覆盖iframe播放器的所有边缘，以便用户单击它而别无其他。以下是设置叠加层的步骤：

将iframe播放器（演示中的#vFrame0）包装在relpos 父容器（也称为.box）中
使用iframe播放器在父对象中放置一个较老的同级 abspos 元素（又称.overlay）。
通过将其z-index设置为比iframe播放器多l和必要的CSS属性（请参见.overlay的演示CSS），将播放器的var sVol = player.setVolume(1); return sVol设置为l上方，以设置较老的同级播放器。较老的兄弟姐妹会完全覆盖iframe播放器的整个边缘。

将click事件注册到叠加元素，因此，当播放器忽略click事件时，该事件会冒泡回到较早的同级叠加元素。现在，overlay元素是各种代理，将运行回调：

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

演示

该演示无法正常运行，因为Vimeo的连接与SO的安全措施之间存在冲突。对于运行正常的演示，请查看此Plunker或此Plunker 。

position: relative

关系： position: absolute | 绝对 biSize = 40

上级兄弟位于引用元素之前的元素。

可以触发Vimeo视频点击吗？

1 个答案:

Vimeo承诺

重叠式布局

演示