py-player

Appearance

Getting Started ​

py-player is a dependency-free Web Component media player. Add a single <script> tag and use custom HTML elements anywhere.

Installation ​

html
<script src="https://unpkg.com/py-player/dist/py-player.min.js"></script>

Or with jsDelivr:

html
<script src="https://cdn.jsdelivr.net/npm/py-player/dist/py-player.min.js"></script>

npm ​

bash
npm install py-player
js
import 'py-player'

Quick Start: Audio Player ​

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/py-player/dist/py-player.min.js"></script>
</head>
<body>
  <py-audio
    src="https://example.com/podcast.mp3"
    title="My Podcast"
    theme="auto"
  ></py-audio>
</body>
</html>

Quick Start: Video Player ​

html
<py-video
  src="https://example.com/video.mp4"
  title="My Video"
  poster="https://example.com/thumbnail.jpg"
></py-video>

Smart Auto-detect ​

Use <py-player> and let it detect the media type automatically based on file extension:

html
<py-player src="https://example.com/audio.mp3" title="Auto Detected"></py-player>
<py-player src="https://example.com/video.mp4" title="Auto Detected Video"></py-player>

Force a specific type with the type attribute:

html
<py-player src="stream.m3u8" type="video"></py-player>

Custom Elements ​

py-player registers three custom elements:

ElementDescription
<py-audio>Audio player with visualization
<py-video>Video player with controls
<py-player>Smart wrapper — auto-detects media type

Next Steps ​