otter-player
v0.0.17
Published
Its cute just like an Otter
Downloads
20
Maintainers
Readme
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;
}
Keyboard Shortcuts
To Do
- [ ] Caption support.
- [ ] Add support for React.
Copyright and license
Licensed under the MIT License, Copyright © 2024-present otter-player.
See LICENSE for more information.