@hosseintaromi/video_player

Video Player ·

A video player like YouTube that allows streaming and complete customization This package lets you play videos in different formats such as m3u8, mp4, or any other form. As you noticed, this package allows you to stream; we used HLS. In terms of appearance, we tried to be entirely similar to YouTube because it is standard and popular, but you will not be limited in any way. You can customize all sections individually.

Key Features

• Ability to stream videos or play simple videos.
• Fully customizable appearance, inspired by YouTube.
• Control over subtitles, dubbing, playback speed, and quality.g, playback speed and quality by default, and access to control all of these in your application.

Table of Contents

• Installation
• Usage
• Key Features
• Config Object Fields
• Examples
• Contributing
• Credits
• Author
• License

Installation

Install with npm:

$ npm i @hosseintaromi/video_player

Install with yarn:

$ yarn add @hosseintaromi/video_player

Usage

import { VideoPlayer } from "@hosseintaromi/video_player";

const App = () => {
  const playerConfig = usePlayer({
    onUpdateTime: (e) => {
      console.log("client", e);
    },
    speeds: [0.5, 1, 1.25, 1.5, 2],
    qualities: [252, 432],
    audioTracks: ["English"],
    subTitle: ["Chinese"],
    keyControl: true,
    theme: "Blue",
    locale: {
      setting_menu_change_speed_title: "انتخاب سرعت پخش",
      setting_menu_change_quality_title: "انتخاب کیفیت",
      setting_menu_quality_list_item_auto: "خودکار (بر اساس اینترنت شما)",
      setting_menu_quality_active_list: "خودکار",
      setting_menu_change_audio_track_title: "انتخاب صدا",
      setting_menu_change_subtitle: "انتخاب زیرنویس",
      setting_menu_subtitle_off: "خاموش",
    },
    autoPlay: true,
    timeForHideEl: 1000,
    type: "HLS",
  });
  return (
    <VideoPlayer
      config={playerConfig}
      src="https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
    />
  );
};

export default App;

Config

config object type and default value

Field	Type	Default	Description
type	"HLS" or "MP4"	"HLS"	Specifies the type of video stream. Use 'HLS' for streaming and 'MP4' for normal videos.
loop	boolean	false	Enables video looping after it reaches the end if set to true.
autoPlay	boolean	false	Starts playing the video automatically when the player is created.
locale	PlayerLocaleType	{}	Object containing locale strings.
speeds	number[]	[0.5, 0.75, 1, 1.5, 2]	Array of play speeds for the video.
theme	"Red" or "Blue"	"Blue"	Sets the color theme for the player. Choose between 'Red' and 'Blue'.
timeForHideEl	number	3000	Time in milliseconds to automatically hide page elements.
icons	IconsType	{}	Object containing ReactNode for various icons.
style	StyleType	{}	Object containing styles for various player elements.
qualities	number[]	[]	Specify the qualities to display. If not provided, all available qualities will be shown.
audioTracks	string[]	[]	Specify the audio tracks to display. If not provided, all available tracks will be shown.
subTitle	string[]	[]	Specify the subtitles to display. If not provided, all available subtitles will be shown.
keyControl	boolean	true	Enables key listeners for actions like play/pause (space key) or mute (M key).
thumbnail	string	""	Link to the thumbnail image in TTF format.
onUpdateTime	(e: OnUpdateTimeType) => void	-	Callback function triggered on video time update.
onEnd	(e: OnUpdateTimeType) => void	-	Callback function triggered when the video reaches the end.
onLoading	(e: boolean) => void	-	Callback function triggered when the video is loading.
onPlayPause	(e: OnUpdateTimeType) => void	-	Callback function triggered on play/pause events.
onUpdateBuffer	(e: number) => void	-	Callback function triggered on buffer update.
onChangeVolume	(e: OnUpdateTimeType) => void	-	Callback function triggered on volume change.
onChangeMute	(e: boolean) => void	-	Callback function triggered on mute/unmute events.
onReady	() => void	-	Callback function triggered when the player is ready.
src	string	""	Source URL of the video.
loadVideo	(src: string) => void	-	Function to load a new video source.
changeLocale	(locale: PlayerLocaleType) => void	-	Function to change the player's locale.

style object type and default value

Field	Type	Default	Description
dir	"rtl" or "ltr"	"ltr"	Text direction (right-to-left or left-to-right).
iconColor	string	""	Color of icons.
settingTextColor	string	""	Color of text in settings menu.
toolbarBg	string	""	Background color of the toolbar.
settingBg	string	""	Background color of the settings menu.
settingBgHover	string	""	Background color of the settings menu on hover.
rangeFrontBg	string	""	Background color of the progress bar.
rangeBackBg	string	""	Background color of the progress bar track.
bufferBg	string	""	Background color of the buffer bar.
settingFontSize	string	""	Font size of text in settings menu.
toolbarFontSize	string	""	Font size of text in the toolbar.
settingTitleTextColor	string	""	Color of the title text in settings menu.

icon object type

Field	Type
setting	ReactNode
checkMark	ReactNode
arrow	ReactNode
play	ReactNode
pause	ReactNode
volumeUp	ReactNode
volumeDown	ReactNode
mute	ReactNode
picInPic	ReactNode
picOutPic	ReactNode
fullScreen	ReactNode
unFullScreen	ReactNode
speed	ReactNode
quality	ReactNode
subtitle	ReactNode
audioTrack	ReactNode
autoPlayOn	ReactNode
autoPlayOff	ReactNode
jumpBack	ReactNode
jumpForward	ReactNode
mic	ReactNode

locale object type

Field	Type	Description
setting_menu_change_speed_title	string	Title for changing speed in the settings menu.
setting_menu_change_quality_title	string	Title for changing quality in the settings menu.
setting_menu_quality_list_item_auto	string	Label for the auto quality option in the settings menu.
setting_menu_quality_active_list	string	Label for the active quality option in the settings menu.
setting_menu_change_audio_track_title	string	Title for changing audio track in the settings menu.
setting_menu_change_subtitle	string	Title for changing subtitle in the settings menu.
setting_menu_subtitle_off	string	Label for turning off subtitles in the settings menu.

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Credits

This software uses the following open source packages:

 ·  React  ·  Node.js  ·  hls.js  ·  emotion

Author

 ·  github/HosseinTaromi

 ·  linkedin/HosseinTaromi

License

Copyright © 2023, Hossein Taromi. Released under the Apache License.