Внешний плейлист

Плейлист из плеера можно переместить в свой контейнер, который находится вне плеера. Сперва нужно подписаться на событие init, чтобы отловить момент, когда плеер загрузился и готов к работе с API. Затем создать плеер с плейлистом и после инициализации провести перемещение командой moveplaylist с id нового контейнера.

<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(){
      player.api("moveplaylist","playlist_container");
   }
</script>

Важные моменты

• Чтобы подписаться на событие инициализации с помощью слушателя, нужно включить опцию Модули / API / Отслеживать события / С помощью слушателей
• Стрелки навигации не перемещаются вместе с плейлистом. Их придется отключить в настройках Модули / Плейлист / Стрелки скроллинга и при необходимости сделать свои.
• Кнопку плейлиста тоже нужно выключить (в разделе Элементы).
• Плеер продолжает взаимодействовать с плейлистом и после перемещения.
• Подробнее о плейлистах
  

Демонстрация

↓

Как сделать кнопки для навигации

Плейлист доступен в DOM по идентификатору playerid_playlist, где playerid - это идентификатор плеера (id). Если у плеера id = player, то к объекту плейлиста можно обратиться по адресу player_playlist.

Пример с кнопками для горизонтального плейлиста (с помощью jquery):

var playlist = $("#player_playlist");
$(".right_scroll_button").click(function() {
   playlist.animate({
      scrollLeft: playlist.scrollLeft()+100
   }, 500);
});
$(".left_scroll_button").click(function() {
   playlist.animate({
      scrollLeft: playlist.scrollLeft()-100
   }, 500);
});

Вы можете настроить скорость, если поменяете цифры в коде (100 - это количество пикселей для перемотки, а 500 - время анимации).

Пример с кнопками для вертикального плейлиста (с помощью jquery):

var playlist = $("#player_playlist");
$(".up_scroll_button").click(function() {
   playlist.animate({
      scrollTop: playlist.scrollTop()-100
   }, 500);
});
$(".down_scroll_button").click(function() {
   playlist.animate({
      scrollTop: playlist.scrollTop()+100
   }, 500);
});

---