Build a video player to suit your exact needs with creator content
The native player is a great way to add video to any page in your online store with just a few lines of code. Let’s get started!
Here’s a basic sample video player to get started:
<script src="https://cdnjs.creatable.io/player/native.js"></script>
<creatable-player
id="creatable-video"
clientId="1759724"
videoId="239175462"
apiKey="t0FTm3XO3rDP0RnQRr69sZSEeeFeg1h1"
controls
playsinline
autoplay
muted
style="width: 360px; height: 640px; object-fit: cover"
></creatable-player>
This player has many options that can be passed to it in order to change its behavior:
Required options
clientId
This is a required option. This is the ID of your Creatable account.
apiKey
This is the API key obtained from the Content API playground in your Creatable account.
Content options
src
A URL to a source file you would like the player to play. This can be retrieved from a request to the Content API.
videoId
A value that represents the identifier of a video on the Creatable platform. This will utilize a built-in request to the Content API to fetch the video’s assets and associated metadata.
poster
A URL to an image to use as the “poster” for the video player.
preload
This option can be used to specific “auto”, “metadata” or “none” and this follows the HTML5 <video> specification for usage. The default value if not provided is “auto”.
controls
This enables the browser’s native controls to be displayed. If this option is not provided, then no controls are displayed.
autoplay
This setting makes the video autoplay. If this option is not provided, the video will display the poster image (if provided) or the first frame of the video. The user must interact with the player to start playback.
muted
This setting mutes the video’s audio. This is an important setting in order to allow autoplay to work across all browsers and devices. Whenever autoplaying a video it is a best practice to have the video be muted in order to preserve the user experience.
loop
This setting allows the video to restart playback once it reaches the end. If this option is not provided, then the video will end on the last frame.
playsinline
This setting tells the browser that the video should be played “inline”, within the element’s playback area. On mobile devices, if you wish the video to play as a fullscreen takeover, then omit this parameter.
controlslist
This setting follows the HTML5 <video> specification. When enabled, it helps the browser select what controls to show.
crossorigin
This setting follows the HTML5 <video> specification. It tells the browser to use specific CORS headers when request media assets.
disablepictureinpicture
This setting prevents the browser from suggesting a picture-in-picture context menu.
disableremoteplayback
This setting is used to disable the capability of remote playback on attached wired devices.
style
This setting allows you to provide CSS3 styling options directly on the <video> element.
Controlling the player with Javascript
You can control the player’s behavior to further customize the user experience. Below is an example that creates custom play and pause buttons and demonstrates how to subscribe to various events that the player emits.
<div>
<button id="play">Play</button>
<button id="pause">Pause</button>
</div>
<script>
// Using events
const player = document.getElementById("creatable-video");
player.on('play', () => console.log('Creatable Player #1 Video Playing!'));
player.on('pause', () => console.log('Creatable Player #1 Video Paused!'));
player.on('seeked', () => console.log('Creatable Player #1 Video Seeked!'));
player.on('ended', () => console.log('Creatable Player #1 Video Ended!'));
player.on('error', () => console.log('Creatable Player #1 error!'));
player.on('timeupdate', ({ currentTarget: { currentTime } }) => console.log('Creatable Player #1 Time:', currentTime));
// Using methods
const playBtn = document.getElementById("play");
const pauseBtn = document.getElementById("pause");
playBtn.addEventListener("click", () => {
player.play();
});
pauseBtn.addEventListener("click", () => {
player.pause();
});
</script>
Site experience tagging
If you wish to tag your player implementation with a site experience tag, you can pass the value via the analytics
option.
<script src="https://cdnjs.creatable.io/player/native.js"></script>
<creatable-player
id="creatable-video"
analytics='{"event_source": "creatable-player"}'
clientId="1759724"
videoId="239175462"
apiKey="t0FTm3XO3rDP0RnQRr69sZSEeeFeg1h1"
controls
playsinline
autoplay
muted
style="width: 360px; height: 640px; object-fit: cover"
></creatable-player>
Questions?
If you have any questions about implementing a custom video experience using the native player, please feel free to reach out to support@creatable.io and we'll be happy to help.