CODEWITHSUNDEEP
javascriptecmascript-6onclicklistenerwistia
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

Play (on Click) wistia video with custom overlay using JS ES6

Below is the mark-up 

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

Below is my ES6 JavaScript attempt:

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');
  });

I am not getting any errors in the console; but video still will not play.

The Wistia API: https://wistia.com/support/developers/player-api seems to only tout jQuery methods to use. I simply want to play the video, that has a custom image overlay, on click, using vanilla JavaScript Es6,

Upvotes: 0

Views: 1624

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

Try to add the event listener after the video has been loaded. The play method has to be user driven. In your example you load the video on a click, but because of the async nature of the video loading the play() method will not be seen as user interaction.

Quote from the play method section in the Wistia documentation.

Because of this restriction, you should avoid calling play() within a setTimeout callback or other asynchronous functions like XHR or javascript promises.

Loading the video is probably a XHR function.
Try out this example below and let me know if it works.

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');
        });

    }});
});

Upvotes: 1

Related Questions