npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

otter-player

v0.0.17

Published

Its cute just like an Otter

Downloads

18

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.