Creatable Native Player

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.