SigmaPlayer

SigmaPlayer is a lightweight, customizable video player designed to provide a seamless playback experience with minimal file size and full functionality. It's perfect for modern web applications and supports advanced features like adaptive streaming, subtitles, and custom controls.

Table of Contents 📑

• Installation
  • Via npm
  • Via Yarn
  • Via CDN
• Usage
  • Basic Usage
  • Advanced Configuration
• Features
• Customization
• API
  • Methods
  • Events
  • Options
• Contributing
• License

Installation 🚀

Via npm

To install SigmaPlayer via npm, run the following command:

npm install sigmaplayer

Via Yarn

To install SigmaPlayer via Yarn, run the following command:

yarn add sigmaplayer

Via CDN

You can also use SigmaPlayer via a CDN by including the following script tag in your HTML:

<script src="https://www.unpkg.com/sigmaplayer"></script>
<link rel="stylesheet" href="https://www.unpkg.com/sigmaplayer/dist/main.css" />

Usage 📄

Basic Usage

To use SigmaPlayer, create an instance by passing a video element or a selector string (e.g., CSS selector) to the constructor. Then, call the initialize() method to initialize the player and set up controls.

Here’s how you can use SigmaPlayer:

<video id="my-video"></video>

<link rel="stylesheet" href="https://www.unpkg.com/sigmaplayer/dist/main.css" />
<script src="https://cdn.jsdelivr.net/npm/sigmaplayer@1.0.6/dist/main.min.js"></script>

<script>
    // Initialize SigmaPlayer
    const player = new SigmaPlayer('#my-video', {
        sources: {
            default: {
                auto: 'https://path-to-your-video.m3u8',
                720: 'https://path-to-your-video-720p.mp4',
                1080: 'https://path-to-your-video-1080p.mp4',
            },
        },
    });
</script>

Advanced Configuration

SigmaPlayer can be customized with options. You can pass various configurations like video sources, playback speed, subtitles, and quality settings.

<video id="my-video"></video>

<script>
    const player = new SigmaPlayer('#my-video', {
        videoType: 'hls', // or 'dash' or 'mp4'
        sources: {
            default: {
                auto: 'https://path-to-your-video.m3u8',
                720: 'https://path-to-your-video-720p.mp4',
                1080: 'https://path-to-your-video-1080p.mp4',
            },
        },
        audioNames: { 1: 'English', 2: 'Spanish' }, // For DASH videos with multiple audio tracks
    });
</script>

Features 🌟

• Lightweight: The build size is only around 38KB.
• Customizable: Fully customizable UI and controls.
• Adaptive Streaming: Supports HLS and DASH streaming with automatic quality selection based on network speed.
• Subtitles and Audio Tracks: Supports multiple audio tracks and subtitle tracks (for DASH videos).
• Controls: Includes playback, volume control, fullscreen, quality selection, and speed adjustment.

Customization 🎨

SigmaPlayer provides several ways to customize its appearance and behavior.

• You can change the video quality by selecting from predefined options or automatically based on network speed.
• Customize the controls using CSS or JavaScript.
• Enable or disable specific features like the settings menu, speed controls, or translation options.

Example of customizing UI

#sigma__controls-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
}

#sigma__play-pause {
    color: red;
}

API 🛠️

Methods 📡

• initialize(): Initializes the player with the given configuration.
• togglePlayState(): Toggles play/pause state of the video.
• toggleFullscreen(): Toggles fullscreen mode.
• setPlaybackSpeed(speed): Sets the playback speed (0.5x, 1x, 2x).
• selectQuality(quality): Manually select video quality.
• selectQualityAuto(levelIndex): Automatically select video quality based on the network speed.
• selectTranslation(translation): Select an audio translation.
• showControls(): Show the control UI.
• hideControls(): Hide the control UI.

Events 🎧

• play: Triggered when the video starts playing.
• pause: Triggered when the video is paused.
• ended: Triggered when the video ends.
• waiting: Triggered when the video is buffering.
• playing: Triggered when the video is playing.
• timeupdate: Triggered periodically as the video plays, provides current playback time.

Options ⚙️

• videoType: The type of video ('mp4', 'hls', 'dash').
• sources: A mapping of video sources and qualities.
• audioNames: (Optional) A mapping of audio track names for DASH videos.

Contributing 🤝

Contributions are always welcome! Please fork the repository and submit a pull request if you want to improve the player.

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Commit your changes
5. Push to the branch
6. Create a pull request

License 📜

This project is licensed under the MIT License - see the LICENSE file for details.