atozas-videoplayer

Installation

npm install atozas-videoplayer

Run Locally (localhost)

npm install
npm start

Open http://localhost:5173.

Basic usage

import React from "react";
import { AtozasVideoPlayer } from "atozas-videoplayer";
import "atozas-videoplayer/styles.css";

export default function App() {
  return (
    <div style={{ maxWidth: 820, margin: "24px auto" }}>
      <AtozasVideoPlayer src="https://www.w3schools.com/html/mov_bbb.mp4" />
    </div>
  );
}

If you use this package in another React app, keep the CSS import line:

import "atozas-videoplayer/styles.css";

Streaming/multi-source usage

import React from "react";
import { AtozasVideoPlayer } from "atozas-videoplayer";

export default function App() {
  return (
    <AtozasVideoPlayer
      poster="https://dummyimage.com/1280x720/000/fff.png&text=Video"
      sources={[
        {
          src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
          type: "application/x-mpegURL"
        },
        {
          src: "https://www.w3schools.com/html/mov_bbb.mp4",
          type: "video/mp4"
        }
      ]}
      seekStep={10}
    />
  );
}

Props

• src?: string Single video URL.
• sources?: { src: string; type?: string }[] Multiple source URLs (for mp4/streaming variants).
• poster?: string
• autoPlay?: boolean
• loop?: boolean
• muted?: boolean
• preload?: "none" | "metadata" | "auto"
• seekStep?: number Skip amount in seconds.
• className?: string Custom class on outer player wrapper.
• style?: React.CSSProperties Inline styles for wrapper.
• controlsClassName?: string Custom class for controls container.
• controlsStyle?: React.CSSProperties Inline styles for controls.
• onPlay?: () => void
• onPause?: () => void
• onEnded?: () => void
• onTimeUpdate?: (currentTime: number, duration: number) => void
• hlsConfig?: Record<string, unknown> Optional hls.js config for streaming URLs.
• playbackRates?: number[] Settings menu speed options. Default: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
• defaultPlaybackRate?: number Initial speed. Default: 1
• onPlaybackRateChange?: (rate: number) => void

Styling

Default styles are included automatically. Override with className, controlsClassName, or your own CSS targeting:

• .atozas-video-player
• .atozas-video
• .atozas-controls
• .atozas-btn
• .atozas-seek
• .atozas-volume

Publish checklist

1. Run npm install
2. Run npm run build
3. Login and publish:

npm login
npm publish --access public