Vidsync NPM | npm.io

VidSync 🎬

🎬 VidSync: Enhance Your Video Experience! 📹

VidSync is your all-in-one solution for turbocharging the native HTML video player in your React applications. 🚀 Whether you're streaming, presenting, or creating interactive media experiences, VidSync has got you covered!

With VidSync, you can seamlessly switch between multiple videos, effortlessly control playback with intuitive keyboard shortcuts, and enjoy full mobile compatibility. 📱 Plus, unleash your creativity with extensive customization options, allowing you to tailor the video player to perfectly suit your project's style.

Key Features:

🔄 Switch between multiple videos on the fly.
🎮 Intuitive keyboard shortcuts for convenient playback control.
🖌️ Fully customizable styling to match your project's aesthetic.
📱 Mobile-friendly design ensures a smooth experience on any device.
🚀 Lightweight and easy to integrate into your React applications.

Whether you're building a video gallery, an e-learning platform, or a multimedia presentation, VidSync empowers you to deliver a seamless and engaging video experience to your users. Try VidSync today and take your video playback to the next level! 💫

Features 🚀

Enhanced Video Player 📺: VidSync provides a streamlined interface to optimize your video viewing experience.
Multiple Video Support 🔄: Easily manage and switch between a collection of videos with a simple array setup.
Customizable Interface 🎨: Tailor VidSync to fit your specific needs with extensive customization options.
Mobile Friendly 📱: VidSync is fully optimized for mobile devices, ensuring a consistent experience across all platforms.
Intuitive Key Bindings ⌨️: Effortlessly

Installation ⚙️

install via npm

npm install vidsync

Or, using yarn

yarn add vidsync

Usage/Examples

import { VidSyncPlayer } from "vidsync";

type VideoPlayerProps = {
  src: string | string[];
  poster?: string | stri[];
  index?: number;
};
export const VideoPlayer = ({ src, poster, index }: VideoPlayerProps) => {
  return <VidSyncPlayer src={src} poster={poster} index={index} />;
};

Customization Options 🎨

Playing With The Primary Color

import { VidSyncPlayer } from "vidsync";

type VideoPlayerProps = {
  src: string | string[];
  poster?: string | stri[];
  index?: number;
};
export const VideoPlayer = ({ src, poster, index }: VideoPlayerProps) => {
  return (
    <VidSyncPlayer
      src={src}
      poster={poster}
      index={index}
      primaryColor="#22d3ee"
    />
  );
};

Playing With The Icons & text Color

import { VidSyncPlayer } from "vidsync";

type VideoPlayerProps = {
  src: string | string[];
  poster?: string | stri[];
  index?: number;
};
export const VideoPlayer = ({ src, poster, index }: VideoPlayerProps) => {
  return (
    <VidSyncPlayer
      src={src}
      poster={poster}
      index={index}
      primaryColor="#22d3ee"
      iconsColor="orange"
    />
  );
};

Documentation

🎥🎥Native HTML Video Tag Attributes 🎥🎥

Attribute	Type	Description
autoplay	boolean	Video plays automatically when loaded
controls	boolean	Displays video controls
height	string	Specifies the height of the video player
loop	boolean	Video restarts automatically when finished
muted	boolean	Video's audio is muted
poster	string	Image displayed while video is loading
preload	string	Specifies how video should be loaded
src	string \| string[]	URL of the video file
width	string	Specifies the width of the video player

✨✨VidSync Attribute ✨✨

Attribute	Type	Description
src	string \| string[]	The URL or array of URLs of the video file(s).
poster	string \| string[]	The URL or array of URLs for the poster image(s) displayed while the video is loading.
index	number	The index of the video in the `src` array to start from. Default is 0.
containerStyles	React.CSSProperties	Custom styles for the video container element.
videoStyles	React.CSSProperties	Custom styles for the video element.
primaryColor	string	The primary color used for styling the component.
iconsColor	string	The color used for icons (e.g., play button, controls).
autoplay	boolean	Specifies that the video will start playing as soon as it is ready.
controls	boolean	Specifies that video controls should be displayed.
height	string	Specifies the height of the video player.
loop	boolean	Specifies that the video will start over again, every time it is finished.
muted	boolean	Specifies that the audio output of the video should be muted.
preload	"auto" \| "metadata" \| "none"	Specifies if and how the video should be loaded when the page loads.
width	string	Specifies the width of the video player.

🎮🎮 Key Bindings 🎮🎮

VidSync provides convenient keyboard shortcuts to control your video playback experience. Here's a list of key bindings along with their corresponding actions:

Shortcut	Description
Shift + N	Moves to the next video 🎬
Shift + P	Moves to the previous video 🔄
K or Spacebar	Toggles between play and pause ▶️⏸️
F	Toggles full-screen mode 🌐
M	Toggles mute/unmute 🔇🔊
Arrow Down	Decreases the volume 🔉
Arrow Up	Increases the volume 🔊
Arrow Left	Seeks backward by 10 seconds ⏪
Arrow Right	Seeks forward by 10 seconds ⏩
I	Toggles picture-in-picture mode 🖼️

These shortcuts allow you to seamlessly control your video playback without leaving your keyboard. Enjoy your video experience with VidSync!

📹🎚️ All Events 📹🎚️

Function Name	Type	Default Value	Description
`onAbort`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the loading of the video is aborted.
`onCanPlay`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser can start playing the video.
`onCanPlayThrough`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video can be played through to the end without buffering.
`onDurationChange`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the duration of the video is updated.
`onEmptied`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video element's resource is suddenly unavailable.
`onEnded`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video has ended.
`onError`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when an error occurred during the loading of the video.
`onLoadedData`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the first frame of the video has finished loading.
`onLoadedMetadata`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the metadata (like dimensions and duration) has been loaded.
`onLoadStart`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser starts loading the video.
`onPause`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video is paused.
`onPlay`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video starts playing.
`onPlaying`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video is playing after having been paused or stopped for buffering.
`onProgress`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser is fetching the video data.
`onSeeked`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the seeking operation has completed.
`onSeeking`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser is in the process of seeking the position of the video.
`onStalled`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser is trying to get media data, but data is not available.
`onSuspend`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the browser is intentionally not currently fetching the media data.
`onTimeUpdate`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the current playback position has changed.
`onVolumeChange`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the volume of the video has changed.
`onWaiting`	`((event: Event) => void) \\| undefined`	`undefined`	Handler for when the video is waiting for data from the server.