Overview
The Player Move API enables you to move the player on your page to different locations, for example, when using single page applications, infinite scroll and other use cases.
API
window.aclrePlayerMoved();
Using the Player Move API relocates the player on the page by moving the player's container to a new location.
Example
let video = document.querySelector("source_container"); //player should be initialized and ready to play
let target = document.querySelector("target_container");
video.parentElement.removeChild(video);
target.appendChild(video);Note
You can use other methods to move the player's container.
To display the same player instance in different places on a page (such as SPA or infinite-scroll pages), the player placeholder should be moved in the document object model (DOM) to the desired location.
After the move is complete, a call to a special API method should be made. Follow the guidelines below to ensure proper operation of the player.
Using the Player Move API
To move the player using this API, you will need to use call these actions in the following order:
Move the player outside of the screen using the Player Move API.
Call Idle to place the player in hibernation mode.
After calling Idle the player will ignore any further actions until activated again.
To activate the player again, call Player Active and then Player Move to move the player to the new location.
Each time the player HTML element has been moved in the DOM, you will need to call the PlayerMoved API method to re-initialize some of the core mechanics of the AnyClip Player
window.aclrePlayerMoved();
Note
This step is mandatory to ensure the player operates correctly in the new location and should be performed immediately after the container relocation.
Warning
After moving a player using this API, you must complete the move by calling this function, otherwise the player will not function properly.