@hosseintaromi/react-player v0.1.65

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 video or play simple video
• The default appearance is quite similar to YouTube, but you can fully customize it in the simplest way
• All facilities are ready for you, such as control of subtitles, dubbing, playback speed and quality by default, and access to control all of these in your application.

Table of Content

 ·  Install  ·  Usage  ·  Contributing  ·  License  ·  Credits  ·  Author  ·  License

Install

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 = () => {
  //you can control everything with this ref
  const controllerRef = useRef<ControllerRefType>({
    changeSpeed: () => {},
    play: () => {},
  });

  // you can create components for
  // right and left sections on
  // the top of the player
  const right = () => <p>hello</p>;
  const left = () => <p>bye</p>;

  // you can do something when user play the video
  const onPlay = () => {
    console.log("onplay");
  };
  // you can pass custom theme to player
  const theme = {
    colors: {
      primary: "yellow",
      videoBg: "#000",
    },
  };

  return (
    <>
      <VideoPlayer
        src="https://videoUrl.m3u8"
        controls={false}
        loop={true}
        muted={false}
        controllerRef={controllerRef}
        topRightContainer={right()}
        topLeftContainer={left()}
        onPlay={onPlay}
        customTheme={theme}
        poster="http://posterUrl.jpg"
      />
      <button
        onClick={() => {
          controllerRef.current.changeSpeed(4);
        }}
      >
        speed X 4
      </button>
    </>
  );
};

export default App;

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.