Package detail

Youtube Player Plus ✨

Youtube Player Plus is an easy-to-use and customizable library for embedding video playback from Youtube in your web application.

Inspired by this package: yt-player

Features

• 🌐 Utilizes the YouTube IFrame Player API
• ⚡️ Offers an incredibly fast initial loading time
  • Automatically loads the YouTube IFrame API <script> during first use
  • For an even quicker start, include <script src='https://www.youtube.com/iframe_api' defer></script> in your webpage
  • Ensures API <script> isn't loaded twice by detecting its presence
• 🚀 API commands are smoothly queued up (wait until both IFrame API and Player instance are ready)
• ⚠️ Distinguishes between serious errors and unplayable video issues
• ⏲️ Incorporates the crucial 'timeupdate' event that YouTube API is missing
• 💡 Clear and detailed code comments for easy comprehension
• 💯 Strongly typed.
• 📦 Does not rely on large dependencies or unnecessary code

Installation

Use the package manager npm to install youtube-player-plus.

 npm i youtube-player-plus

Usage

Quick Start

1. Install and import YouTubePlayerPlus:

import YouTubePlayerPlus from 'youtube-player-plus';

2. Create an instance with an element reference and an optional config object:

const element = 'your-element-selector'; // Or an HTMLElement reference
const options = {}; // Optional configuration object
const player = new YouTubePlayerPlus(element, options);

3. Load a video and control playback:

player.load(videoId, autoplay, start);
player.play();
player.pause();
player.stop();

4. Listen to events:

import type { YTAPI_PlaybackQuality, YTAPI_PlaybackRate } from 'youtube-player-plus/types'

player.on('playing', () => {});

player.on('timeupdate', (current_time: number) => {
    console.log('Current time:', current_time);
})

player.on('playbackQualityChange', (quality: YTAPI_PlaybackQuality) => {
    console.log('Player quality changed to', quality)
})

player.on('playbackRateChange', (rate: YTAPI_PlaybackRate) => {
    console.log('Player rate changed to', rate)
})

Constructor

YouTubePlayerPlus(element: HTMLElement | string, options?: YT_IFRAME_OPTIONS)

Parameters

element : HTMLElement or CSS selector - Target element or CSS selector where the YouTube player will be initialized.

options : Object - Optional configuration object for the YouTube player, default values specified below:

Methods

Getters/Setters

Events

Listen to events

To listen to an event:

player.on('event-name', (eventData) => {
  // Your event handling logic here
});

To stop listening to an event:

player.removeListener('event-name', eventHandlerFunction);

Examples:

• vanilla-ts

Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT