使用 JS ES6 播放（点击）带有自定义叠加层的 wistia 视频答案

【问题标题】：Play (on Click) wistia video with custom overlay using JS ES6使用 JS ES6 播放（点击）带有自定义叠加层的 wistia 视频
【发布时间】：2019-09-18 03:34:08
【问题描述】：

下面是标记

<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
  <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
      <div id="play-button-overlay-zwflowymel" class="play-button-overlay d-none d-block">
         <img class="custom-wistia-play-button img-fluid " src="/assets/img/VSL-2019-Thumbnail-01.png" width="942" height="530">
      </div>
      <script src="https://fast.wistia.com/embed/medias/zwflowymel.jsonp" async></script>
      <div id="sp-video_zwflowymel" class="wistia_embed wistia_async_zwflowymel videoFoam=true" style="height:100%;position:relative;width:100%">
         <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
         </div>
      </div>
   </div>
</div>

下面是我的 ES6 JavaScript 尝试：

document.addEventListener('DOMContentLoaded', () => {
      loadSVGs();
      document.getElementById("play-button-overlay-zwflowymel").addEventListener('click', () => {
      _wq.push({
      id: 'zwflowymel',
      onReady: function (video) {
      video.play();
    }
   });
   console.log('pressed Play');
  });

我在控制台中没有收到任何错误；但视频仍然无法播放。

Wistia API：https://wistia.com/support/developers/player-api 似乎只宣传要使用的 jQuery 方法。我只是想在点击时使用 vanilla JavaScript Es6 播放具有自定义图像叠加层的视频，

【问题讨论】：

为了更好地回答这个问题，请出示您的 html 和 css。你的 javascript 引用了 id 为 play-button-overlay-zwflowymel 的 div 你的代码中有那个 div 吗？它的风格如何？
@jimboweb 是的；不知道为什么被省略了。 html 标记又回来了。

标签： javascript ecmascript-6 onclicklistener wistia

【解决方案1】：

在视频加载完成后尝试添加事件监听器。 play 方法必须由用户驱动。在您的示例中，您通过点击加载视频，但由于视频加载的异步性质，play() 方法不会被视为用户交互。

引自 Wistia 文档中的 play method section。

由于这个限制，您应该避免在 setTimeout 回调或其他异步函数（如 XHR 或 javascript Promise）中调用 play()。

加载视频可能是XHR 函数。
试试下面这个例子，让我知道它是否有效。

document.addEventListener('DOMContentLoaded', () => {
    loadSVGs();
    _wq.push({ id: 'zwflowymel', onReady: function (video) {

        document.getElementById("play-button-overlay-zwflowymel").addEventListener('click', () => {
            video.play();
            console.log('pressed Play');
        });

    }});
});

【讨论】：