mirax-player

Mirax Player

Table of Contents

• Description
• Installation
• Usage
• License

Description

Mirax Player is a simple video player for react web application.

Installation

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

How to use

You can apply it in react app in your app.js or main.js or jsx extension add: import 'mirax-player/mirax.css';

---

in your component file ex. VideoComponent.jsx

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

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

useEffect(() => { const videoElement = attach('.whatever'); // you can declare any variable here starts with . point // find className="whatever" src="clip.mp4"

const options = {
  playPauseBtn: '.play-pause-btn',
  volumeSlider: '.volume-slider',
  progressBar: '.progress-bar',
  currentTimeStamp: '.current-time',
  durationTimeStamp: '.duration-time',
  fullscreenBtn: '.fullscreen-btn',
};

const videoPlayer = new mirax(videoElement, options);

// Listen for the "timeupdate" event to update time values
videoElement.addEventListener('timeupdate', () => {
  videoPlayer.updateCurrentTimeAndDuration();
});

return () => {
  // Clean up any resources if needed
};

}, []);

const togglePlayPause = () => { setIsPlaying(prevIsPlaying => { const video = attach('.whatever'); if (prevIsPlaying) { video.pause(); } else { video.play(); } return !prevIsPlaying; }); };

return (

  <video className="whatever" src="clip.mp4"></video>
  <div className="controls">
   <div className="volume-icon">
      <div className="speaker"></div>
    </div>
    <button className="play-pause-btn" onClick={togglePlayPause}>
      {isPlaying ? 'Pause' : 'Play'}
    </button>
    <input
      type="range"
      className="volume-slider"
      min="0"
      max="1"
      step="0.01"
      defaultValue="1"
    />
    <progress className="progress-bar" min="0" max="100" value="0"></progress>
    <div className="current-time"></div>
    <div className="duration-time"></div>
    <button className="fullscreen-btn">Fullscreen</button>
  </div>
</div>

); };

export default VideoPlayerComponent;

Features

• Play and Pause
• Fullscreen
• Adjust the volume (low or high)
• You can point and drag the timestamp in video time duration anywhere

---

npm install mirax-player