Player surface¶
The player surface is the area of the DOM where video is displayed: a
<video> element and its container <div>. The container element also
hosts overlays such as subtitles and advertisements when the relevant
components are installed.
You interact with the player surface through the IPlayerSurface API.
Basic usage¶
Import the default PRESTOplay styles:
import "@castlabs/prestoplay/clpp.styles.css";
The player surface is initialized with the player by passing a video element and its container element to the constructor:
<div id="containerID">
<video id="videoID"></video>
</div>
const videoEl = document.getElementById('videoID');
const containerEl = document.getElementById('containerID');
const player = new clpp.Player(videoEl, {/* config */}, { containerEl });
containerEl must be the direct parent of the <video> element and can be
any element. If you omit it, the player creates the container <div> itself.
Overriding default CSS styles¶
PRESTOplay wraps the <video> element in a container <div> with the
clpp-container class, and adds the clpp-video class to the <video>
element itself:
<div class="clpp-container">
<video id="videoID" class="clpp-video" />
</div>
When the player creates the container, it moves the classes, inline styles,
and width/height attributes of the <video> element to the container.
To override the default player surface styles, add your own stylesheet and
extend the .clpp-container or .clpp-video class.
Disabling the container¶
You can disable the player surface container element entirely. Keep the container enabled unless you have a specific reason to remove it — see the trade-offs below.
Note
Disabling the container has these effects:
Subtitle components may not display subtitles correctly, or at all.
Ad components (such as Google IMA or FreeWheel) may not display ads and ad overlays correctly, or at all.
The
HtmlTextDisplayerAPI does not work.
To disable the player surface container, use the disableContainer option
when initializing the player:
<video id="videoID"></video>
const videoEl = document.getElementById('videoID');
const player = new clpp.Player(videoEl, {/* config */}, { disableContainer: true });