Open Source Ecosystems

Features

Streaming support via HLS and DASH.
Keyboard shortcuts.
Feature 3.

Installation

CDN

Install The Otter Player using CDN.

<head>

<script type="module" src="https://unpkg.com/otter-player"></script>

🚧 Specific Version

<script type="module" src="https://unpkg.com/otter-player@latest"></script>

Usage Example

Use the Otter Player Markup in your HTML. That's it 🎉.

HTML

<otter-player title="Sprite Fight" poster="https://files.vidstack.io/sprite-fight/poster.webp" src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8">
  <otter-layout></otter-layout>
</otter-player>

Check out the demo on Codepen.

Attributes

src

poster

loop

muted

volume

duration

autoplay

The preload attribute, when used with the otter-player element, specifies how the player should handle the preloading of the video content. This is an important consideration for optimizing the user experience and managing the initial loading of the video resource.

The preload attribute can be set to one of the following values:

"auto": This value indicates that the player should automatically determine the most appropriate preload behavior based on the user's connection speed and device capabilities. The player may choose to preload the entire video or only the initial metadata, depending on the available resources and the user's bandwidth.
"metadata": This value indicates that the player should only preload the initial metadata of the video, such as the duration, dimensions, and title. This can help reduce the initial load time and conserve bandwidth, especially for users with slower internet connections.
"none": This value indicates that the player should not preload any video content. Instead, the video will only be loaded when the user initiates playback. This can be useful for conserving system resources and bandwidth, particularly on mobile devices or for videos that may not be viewed by all users.

The crossorigin attribute, when used with the otter-player element, specifies how the player handles cross-origin requests. This is an important consideration for ensuring the proper handling of resources, such as thumbnails or subtitles, that may be hosted on a different domain than the main web application.

The crossorigin attribute can be set to one of the following values:

"anonymous": This value indicates that the player will make cross-origin requests without sending user credentials (such as cookies or HTTP authentication). This is the default behavior and is suitable for accessing public resources.
"use-credentials": This value indicates that the player will make cross-origin requests while sending user credentials. This is necessary when accessing resources that require authentication or authorization, such as private video files or user-specific subtitles.

playsinline

disabled

disable-controls

disable-spinner

disable-volume-slider

disable-seek-bar

disable-title

disable-center-controls

disable-seek-buttons

disable-seek-left-button

disable-seek-right-button

disable-play-pause-button

Customization

The Otter Player styles can be easily customized by altering the players default variables in the :root of your CSS.

CSS

:root {
  /* otter player default variables */

  /* otter player variables */
  --otter-player-width: 100%;
  --otter-player-height: 100%;
  --otter-player-background-color: #000000;
  --otter-player-border-radius: 15px;
  --otter-player-object-fit: contain;
  --otter-player-transition: all 0.15s ease;
  --otter-player-font-family: "Roboto", sans-serif;
  --otter-player-disabled-opacity: 0.5;

  /* otter button variables */
  --otter-button-size: 66px;
  --otter-button-height: var(--otter-button-size);
  --otter-button-width: var(--otter-button-size);
  --otter-button-border-radius: 100%;
  --otter-button-cursor: pointer;
  --otter-button-transition: all 0.05s ease;
  --otter-button-background-color-initial: rgba(255, 255, 255, 0);
  --otter-button-background-color-hover: rgba(255, 255, 255, 0.28);
  --otter-button-background-filter-initial: blur(0px);
  --otter-button-background-filter-hover: blur(45px);
  --otter-button-disabled-opacity: 0.5;
  --otter-button-icon-scale-down-by: 14px;
  --otter-button-icon-color: #ffffff;
  --otter-button-outline: none;
  --otter-button-border: none;
  
  /* otter slider variables */
  --otter-slider-rotate: 270deg;
  --otter-slider-height: 8px;
  --otter-slider-width: 180px;
  --otter-slider-outline: none;
  --otter-slider-border: none;
  --otter-slider-cursor: pointer;
  --otter-slider-transition: none;
  --otter-slider-border-radius: 9999px;
  --otter-slider-background-color: rgba(255, 255, 255, 0.28);
  --otter-slider-backdrop-filter: blur(45px);
  --otter-slider-progress-color: #ffffff;
  --otter-slider-thumb-size: 26px;
  --otter-slider-thumb-height: var(--otter-slider-thumb-size);
  --otter-slider-thumb-width: var(--otter-slider-thumb-size);
  --otter-slider-thumb-color: #ffffff;
  --otter-slider-thumb-border-radius: 100%;
  --otter-slider-thumb-transition: background .3s ease-in-out;
  --otter-slider-thumb-box-shadow: 0 0 2px 0 #555555;
  --otter-slider-thumb-outline: 0px solid rgba(255, 255, 255, 0.28);
  --otter-slider-thumb-active-outline: 7px solid rgba(255, 255, 255, 0.28);
  
  /* otter seek bar container variables */
  --otter-seek-bar-container-width: calc(var(--otter-player-width) - 68px);
  --otter-seek-bar-container-height: 100%;
  
  /* otter seek bar variables */
  --otter-seek-bar-rotate: 0deg;
  --otter-seek-bar-height: 6px;
  --otter-seek-bar-width: 100%;
  --otter-seek-bar-outline: none;
  --otter-seek-bar-border: none;
  --otter-seek-bar-cursor: pointer;
  --otter-seek-bar-transition: none;
  --otter-seek-bar-border-radius: 9999px;
  --otter-seek-bar-background-color: rgba(255, 255, 255, 0.28);
  --otter-seek-bar-backdrop-filter: blur(45px);
  --otter-seek-bar-progress-color: #ffffff;
  --otter-seek-bar-thumb-size: 22px;
  --otter-seek-bar-thumb-height: var(--otter-seek-bar-thumb-size);
  --otter-seek-bar-thumb-width: var(--otter-seek-bar-thumb-size);
  --otter-seek-bar-thumb-color: #ffffff;
  --otter-seek-bar-thumb-border-radius: 100%;
  --otter-seek-bar-thumb-transition: background .3s ease-in-out;
  --otter-seek-bar-thumb-box-shadow: 0 0 2px 0 #555555;
  --otter-seek-bar-thumb-outline: 0px solid rgba(255, 255, 255, 0.28);
  --otter-seek-bar-thumb-active-outline: 7px solid rgba(255, 255, 255, 0.28);
  
  /* otter spinner variables */
  --otter-spinner-z-index: 9999;
  --otter-spinner-size: calc(var(--otter-button-size) + 22px);
  --otter-spinner-height: var(--otter-spinner-size);
  --otter-spinner-width: var(--otter-spinner-size);
  --otter-spinner-border: 5px solid rgba(255, 255, 255, 0.70);
  --otter-spinner-border-left-color: transparent;
  --otter-spinner-border-radius: 100%;
  --otter-spinner-animation: otter-spinner 1s linear infinite;
  --otter-spinner-transform-0-percent: rotate(0deg);
  --otter-spinner-transform-100-percent: rotate(360deg);
  
  /* otter title variables */
  --otter-title-width: fit-content;
  --otter-title-height: fit-content;
  --otter-title-color: #ffffff;
  --otter-title-font-family: var(--otter-player-font-family);
  --otter-title-font-size: 24px;
  --otter-title-font-weight: 400;
  --otter-title-margin-left: 34px;
  
  /* otter play/pause spacer */
  --otter-play-pause-spacer: 132px;
    
  /* otter top/bottom height */  
  --otter-top-bottom-height: 84px;
  
  /* otter volume/brightness width */ 
  --otter-volume-brightness-width: 104px;
}