Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/otter-player/otter-player

Its cute just like an Otter
https://github.com/otter-player/otter-player

accessibility audio customizable dash hls html javascript media otter-player player streaming ui video web-components

Last synced: 3 days ago
JSON representation

Its cute just like an Otter

Awesome Lists containing this project

README 

        


Logo Banner





Its cute just like an Otter.








## Features



- Streaming support via HLS and DASH.

- Keyboard shortcuts.

- Feature 3.



## Installation



### CDN



Install The Otter Player using CDN.



``````



```html



```



#### 🚧 Specific Version

```html



```



## Usage Example



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



```HTML```



```HTML



  



```



Check out the demo on [Codepen](https://codepen.io/GreenestGoat/pen/QWRxNYb).



## 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```



```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](https://github.com/otter-player/otter-player/blob/main/LICENSE) for more information.