mirax-player

Mirax Player

---

---

Table of Contents

• Description
• Installation
• Usage
• Features
• License

Description

Mirax Player is a light-weight javascript video player.

---

https://www.npmjs.com/package/mirax-player

Installation

To install the Mirax Player, you can use the following npm command:

npm install mirax-player

How to use

You can apply it in react app

---

example : location of video file public/clip.mp4

---

Usage

In you React component

---

Then use it from Mirax Player:

import React, { useEffect, useState } from 'react';
import { mirax } from 'mirax-player';

const ExampleComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    const video = document.querySelector('.mirax');
    if (video) {
      mirax(video, isPlaying, setIsPlaying);
    }
  }, [isPlaying]);

  return (
    <div>
      <div className='whatever'>
      <video className="mirax" src="clip.mp4"></video>
      </div>
    </div>
  );
};

export default ExampleComponent;

--

You can you useRef in React hooks to make it minimal:

import React, { useEffect, useState, useRef } from 'react';
import { mirax } from 'mirax-player';

const ExampleComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      mirax(videoRef.current, isPlaying, setIsPlaying);
    }
  }, [isPlaying]);

  return (
    <div>
      <div className='whatever'>
        <video ref={videoRef} className="mirax" src="clip.mp4"></video>
      </div>
    </div>
  );
};

export default ExampleComponent;

---

Features

• Play and Pause
• Responsive
• Can play videos (Portrait or Landscape)
• 9:16 dimension supported (Mobile video)
• Fullscreen
• Adjust the volume (low or high)
• You can point and drag the timestamp in video time duration anywhere
• PIP supported (picture in picture) will play the clip even if leave the tab open new app

---

License

MIT