AircloudHlsPlayer Example Project

A React component for streaming HLS video using Video.js.

This project provides a flexible React component, AircloudHlsPlayer, for robust HLS video streaming powered by Video.js. It is designed for easy integration into React and Next.js applications.

Features

• HLS Streaming: Plays .m3u8 streams using Video.js.
• Customizable: Pass standard Video.js options and props.
• Easy Integration: Works with React and Next.js projects.

Installation

Install the package with npm:

npm install aircloud-hls-player-react--save example

Usage Example

Here’s how to use AircloudHlsPlayer in a Next.js app:

// example/src/app/page.tsx
"use client";
import { AircloudHlsPlayer } from "aircloud-hls-player-react";

export default function Home() {
  return (
    <main style={{ padding: 32 }}>
      <h2>Video.js HLS Player Example</h2>
      <AircloudHlsPlayer
        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        width={640}
        height={360}
        controls
        autoplay={true}
        muted={true}
      />
    </main>
  );
}

API

<AircloudHlsPlayer /> Props

• src (required): string – The HLS stream URL (.m3u8).
• width (optional): number – Player width in pixels.
• height (optional): number – Player height in pixels.
• controls (optional): boolean – Show player controls.
• autoplay (optional): boolean – Autoplay video.
• muted (optional): boolean – Mute video on start.

Troubleshooting

• Autoplay not working?
  Most browsers require the video to be muted for autoplay to work.
• CORS errors?
  The video stream server must send proper CORS headers (Access-Control-Allow-Origin). Use public test streams for development.

Contributing

Contributions are welcome! Please open issues or pull requests.

License

MIT ©