/react-youtube-music-player

A simple React hook for building a music player using the official YouTube IFrame Player API

Primary LanguageTypeScript

react-youtube-music-player

NPM JavaScript Style Guide

alt text

For example player, click here

Installation

npm install react-youtube-music-player

Usage

import { useYoutube } from "react-youtube-music-player";
const { playerDetails, actions } = useYoutube({
  id: "RDLbqzhXWl33U",
  type: "playlist",
});

Input props

Prop Description
id The id of a video or playlist to play
type Set video or playlist depending on the id
options origin: Origin domain for additional security
autoplay: Whether to autoplay the video
host: Points host to correct origin for CORS
loop: Whether a single video should be looped
mute: Whether to start the video muted
start: Time, in seconds from the beginning of the video, when to start playing
end: Points host to correct origin for CORS
host: Time, in seconds from the beginning of the video, when to stop playing
events onReady: Called when media is initialized and ready to play
onStateChanged: Called when video state changed
onError: Called when error occurs

Return props

State of the player: playerDetails

Prop Description
id The id of currently playing video
state Current state of the media - UNSTARTED(-1), ENDED(0), PLAYING(1), PAUSED(2), BUFFERING(3), CUED(5)
title Title of the video
duration Duration of the media, in seconds
currentTime Number of seconds that have been played
volume Volume of the player

Internal player functions: actions

Function name Description
playVideo() Play video
stopVideo() Stop video
pauseVideo() Pause video
nextVideo() Play next video
previousVideo() Play previous video
setVolume(volume) Set the volume of the player, between 0-100
seekTo(seconds, allowSeekAhead) Seek to the given number of seconds