0

以下、目印です 

<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 メソッドのみを宣伝しているようです。バニラ JavaScript Es6 を使用して、クリック時にカスタム イメージ オーバーレイを持つビデオを再生したいだけです。

4

1 に答える 1