外部播放列表

  抱歉,此页面正在等待翻译成土耳其语

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(){
      player.api("moveplaylist","playlist_container");
   }
</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
  • 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.
  • Read more about playlist

Demo


How to make buttons for navigation

The playlist is available in the DOM by the playerid_playlist id, where playerid is the id of the player. If the player has id = player, then the playlist object can be accessed at player_playlist.

An example with buttons for a horizontal playlist (using 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);
});

You can adjust the speed if you change the numbers in the code (100 is the number of pixels to scroll, and 500 is the time of the animation).

An example with buttons for a vertical playlist (using 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);
});

19.12.11
2024 © PlayerJS

登录

登录

免费注册

注册
注册即表示您同意服务条款
登录(如果您有帐户)

恢复密码

恢复
忘记电子邮件?联系我们