Search code examples
javascriptjqueryhtml5-videoplyr.js

Plyr video player: How to expose/access multiple players?

I'm using the Plyr video player plugin.

Setting up a player for a single video is straightforward and works well:

$(document).ready(function() {
  var player_singleVideo = new Plyr("#singleVideo", {
    // Options
    controls: []
  });
  // Expose player
  window.player_singleVideo = player_singleVideo;
});

After that, I can access it with the plugin's API via the the player's variable, like so:

player_singleVideo.play()

Now I would like to set up & access multiple players, using a string selector. The setting up remains as easy as before:

var players_multiple = Plyr.setup('.video_sample');

But I am stuck at finding out how to access the players this creates with the API. Checking the variable used in the setup returns an array containing the players (I assume), but that is as far as I get:

console output when checking multiple players array

Would really appreciate if someone could explain to me how I can make these players accessible and use the API on them.

Solution

  • What worked for me, is accessing the video using the DOM order "[0], [1], [2]". This way you can interact with the video you like. Hope this helps. 

    $(".play-video").on("click", function(){
    players_multiple[1].play(); 
});