【问题标题】：Possible to trigger on Vimeo video click?可以触发 Vimeo 视频点击吗？
【发布时间】：2018-06-27 00:51:01
【问题描述】：

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

这是一个 Vimeo 视频，加上帐户（允许 background=1）。

基本上，我有一个 Vimeo 视频，没有设置为循环和自动播放音量为 0 的控件。我的实现在视频顶部中间有一个图标。当点击时，它被设置为最大音量并且图标被隐藏。

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

问题是我无法弄清楚如何定位此点击。我已尝试将 .on('click') 附加到 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();
    });
});

【问题讨论】：

看起来好像您正在使用 vimeo api，看看 github.com/vimeo/player.js#events 这些事件是否能满足您的需求？
谢谢@Isaac，但不，不幸的是，这些都与点击事件无关。无论如何，谢谢。
这很不幸。祝你好运，抱歉我帮不上忙。
拥有控件似乎是全屏的唯一方法，因为 player.js 没有与全屏相关的方法。

标签： javascript jquery vimeo-api vimeo-player

【解决方案1】：

Vimeo 承诺

看来，如果您使用 Vimeo API，则必须返回一个 Promise。如果你只是想做一个简单的任务，比如控制音量，文档给出了这个例子：

player.setVolume(0.5).then(function(volume) { // 音量已设置 }).catch(函数(错误){ 开关（错误名称）{ 案例“范围错误”： // 音量小于 0 或大于 1 休息; 默认： // 发生了其他错误休息; } });

不简单，而且有点矫枉过正。看着它并不明显，但如果你看到 then()、await async、new Promise，你可以 99.9% 的肯定会返回一个 Promise。我对player.js 的研究还不够深入，但我认为每个方法都包含在一个 Promise 中，据我所知，我们可以返回该方法而无需使用所有额外的废话。因此，将上面的代码与以下代码进行比较：

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

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

叠加布局

您需要单击 iframe 之外的元素，而不是单击一个装有视频播放器的 iframe，该播放器将执行 100 个其他任务（除了您的自定义回调）。作为没有控件的背景视频，您的功能非常有限。我建议一个元素覆盖 iframe 播放器边缘到边缘，以便用户单击它而不是其他任何东西。以下是设置叠加层的步骤：

将 iframe 播放器（演示中的#vFrame0）包装在 relpos^? 父容器（又名.box）中
将年长的兄弟^? abspos^? 元素（又名.overlay）放置在带有 iframe 播放器的父级中。
通过将其z-index 设置为大于 iframe 播放器的 l 和必要的 CSS 属性（请参阅 .overlay 的演示 CSS）来将较早的兄弟设置为“高于”播放器，以确保较早的兄弟覆盖 iframe 播放器边缘完全边缘化。
将点击事件注册到叠加元素，这样当玩家忽略点击事件时，该事件将冒泡回到老兄弟叠加元素。覆盖元素现在是某种代理，并将运行回调：
```
  var sVol = player.setVolume(1); return sVol
```

演示

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

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

^?老兄弟一个位于被引用元素之前的元素。

【讨论】：