Add autoplay to get around Chrome blocking and allow for programmatic control

[jamesvclements]

Webflow uses Embedly for their Video component and Lightbox component. Right now, there's no reliable way to programmatically control these videos using player.js, because Chrome blocks player.play() events until the user has interacted with it.

I've gotten around this directly using Vimeo embeds, making sure they're muted and allow autoplay. But there's no way to pass these parameters in for the native Webflow player and it doesn't seem like the player that embedly generates works either.

Is there any way to use player.play() before the user has interacted with the page / player?

[spencercap]

it doesn't seem like the player that embedly generates works either.

i was able to get their embedded player to work but you are right, there needs to be a user action performed on the player first before any programmatic interactions can take place, probably a browser precaution.

i did this in Webflow's custom code

<script>
// load embedly api
(function(w, d){
  var id='embedly-platform', n = 'script';
  if (!d.getElementById(id)){
    w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
    var e = d.createElement(n); e.id = id; e.async=1;
    e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
    var s = d.getElementsByTagName(n)[0];
    s.parentNode.insertBefore(e, s);
  }
})(window, document);

setTimeout(() => {
	console.log('timeouted');
  
  embedly('player', function(player){
  	console.log(player);
    
    console.log(player.url) // URL of the media that we are operating on.

    // When the user pauses a video, perform an action.
    player.on('pause', function(){
      //display modal.
    });
    
    // FYI 
    // the user MUST interact w the video player BEFORE the next timeout goes off since programmatic interactions dont work

    // Autoplay all the videos that support Player.js
    setTimeout(() => {
    	console.log('another timeout');
          player.play();
    }, 2000);
    //player.play()
  });
}, 2000);
</script>

as per the embedly docs:

• https://docs.embed.ly/reference/platformjs
• https://docs.embed.ly/reference/player