Experience Management
      Back to home
      1. Creatable Support
      2. Guide for Developers
      3. Experience Management

      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.