CODEWITHSUNDEEP
javascriptvimeo-apivimeo-player
thebobajob
thebobajob

Reputation: 21

Pausing a Vimeo video as soon as it loads using API - doesn't always work

I am loading a Vimeo video using the API and want it paused as soon as it loads so I can control the playing depending on whether it is on screen or not. This seems to work some of the time but not all the time and doesn't appear to follow a pattern. So, I wondered if I am doing anything wrong?

This is what I have...

This code is in the PHP page itself

<div id="UNIQUEPLAYERNAME"></div>
document.addEventListener("DOMContentLoaded", (event) => {
  var options = {
    url: '<?php echo $video_url; ?>',
    autoplay: 0,
    autopause: 0,
    dnt: 0,
    background: 1,
    loop: 1
  };
  var UNIQUEPLAYERNAME = fncNewVideo("UNIQUEPLAYERNAME", options);
  var onLoaded = function(data) {                         
    UNIQUEPLAYERNAME.ready().then(function() {
      fncWorkVideoInView('.trigger', UNIQUEPLAYERNAME);
    });
  };
  UNIQUEPLAYERNAME.on('loaded', onLoaded);
      
  var eventList = ["scroll", "resize", "orientationchange"];
  for(event of eventList) {
    window.addEventListener(event, function() {
      fncWorkVideoInView('.trigger', UNIQUEPLAYERNAME);
    });
  }
});

UNIQUEPLAYERNAME is generated using PHP as there are multiple videos on the page This code is in the master JS file and loads the video correctly

window.fncNewVideo = (player, options) => {
  return new Player(player, options);
}

The function fncWorkVideoInView is also in the master.js file and works fine. It triggers correctly on first call but the pause doesn't happen every time so, I am pretty sure it is something to do with calling the pause directly after loading but I thought using the event listener "loaded" would make sure everything is ready to control.

Upvotes: 0

Views: 51

Answers (0)

Related Questions