外部播放列表 抱歉,这篇文章有英文版 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
Demo↓ How to make buttons for navigationThe playlist is available in the DOM by the playerid_playlist id, where playerid is the id of the player. If the player has An example with buttons for a 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 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); }); |