How to move the playlist in the outer container


The playlist from the player can be moved to the outer container. Firstly you need to catch init event when the player is ready to work with the API. Then create a player with a playlist and move it.

<div id="player1"></div>
<div id="playlist_container"></div>
<script>
   document.getElementById("player1").addEventListener("init",PlayerInit);
   var player = new Playerjs({
      id:"player1",
      file:[
         {"title":"1",file:"//site.com/1.mp4"},
         {"title":"2",file:"//site.com/2.mp4"}
      ]
   });
   function PlayerInit(){
      document.getElementById("playlist_container").appendChild(
         document.getElementById("player1_playlist")
      );
      document.getElementById("player1_playlist").style.maxHeight = "none";
   }
</script>

Important points

  • If you want to catch init event with a listener, you need to enable the option Plugins / API / Events tracking / Use listeners
  • The ID of playlist is combined from the players ID and _playlist
  • Navigation arrows do not move with the playlist. They can disabled it in the settings Plugins / Playlist / Scroll arrows and make your own if you need.
  • The playlist button must also be turned off (in the Elements section).
  • The player continues to interact with the playlist after moving.
  • You can change the design of the playlist via CSS. In the example above the maxHeight of playlist is unlimited.
  • Read more about playlist

Demo




The Art of Players
2018 © PlayerJS with ♥

Login

Restore password
Sign up
Log in

Sign up free

Sign up
By signing up, you agree to Terms of Service
Login if you have an account

Order player

Your name
What project do you need a player for?
Email
Phone
Description
Send
You agree to processing of this personal data.

Restore password

Restore
Forgot email? Contact us