Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mirax-player

Package Overview
Dependencies
Maintainers
1
Versions
144
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mirax-player

A light weight javascript video player

  • 2.0.0-beta.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-96.69%
Maintainers
1
Weekly downloads
 
Created
Source

Mirax Player


video


Table of Contents

  • Description
  • Installation
  • Usage
  • Colors
  • Features
  • License

Description

Mirax Player is javascript video player for react web application.


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 the attach from Mirax Player:


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

const ExampleComponent = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    useEffect(() => {
      const videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });
      return () => {
      };
    }, []);
    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="fullscreen"></button>
        </div>
      </div>
    );
  };
export default ExampleComponent;


Colors

To change color for progress bar and progress frame


const progressColorize = 'blue'; //change any color


const progressColorize = '#00ff00'; // hexadecimal colors supported


If you want to set as default color just leave it empty:


const progressColorize = ''; //default color

const progressFrame = ''; //default color


import Mirax, { attach, progressColor } from 'mirax-player';



keys:

const progressColorize = '';


before:


return () => {
      };
    }, []);


after:



 const injectProgress = progressColor(progressColorize);
    return () => {
      document.head.removeChild(injectProgress);
    };
  }, [ progressColorize ]);



example:



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

const ExampleComponent = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const progressColorize = 'red'; // try put #00ff00 
    useEffect(() => {
      const videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });

      const injectProgress = progressColor(progressColorize);
      return () => {
        document.head.removeChild(injectProgress);
      };
    }, [progressColorize]);
    
    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="fullscreen"></button>
        </div>
      </div>
    );
  };
export default ExampleComponent;




You can also use both: progressColor and progressFrame

example:


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

const ExampleComponent = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const progressColorize = 'purple'; //change color here
    const frameColorize = '#ff4500'; //change color here
     //to set default: const frameColorize = ''; no value

    useEffect(() => {
      const videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });

      const injectProgress = progressColor(progressColorize);
      const injectFrame = progressFrame(frameColorize);
      return () => {
        document.head.removeChild(injectProgress);
        document.head.removeChild(injectFrame);
      };
    }, [ progressColorize, frameColorize]);

    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="fullscreen"></button>
        </div>
      </div>
    );
  };
export default ExampleComponent;


Features

  • Play and Pause
  • Fullscreen
  • Adjust the volume (low or high)
  • You can point and drag the timestamp in video time duration anywhere
  • You can change the color of progress bar and progress frame

License

MIT

Keywords

FAQs

Package last updated on 26 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc