Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
mirax-player
Advanced tools
Mirax Player is javascript video player for react web application.
https://www.npmjs.com/package/mirax-player
To install the Mirax Player, you can use the following npm command:
npm install mirax-player
You can apply it in react app
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;
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:
import Mirax, { attach, progressColor } from 'mirax-player';
keys:
const progressColorize = '';
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;
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;
MIT
FAQs
A free video player compatible with React, Vue, Angular, and Svelte.
The npm package mirax-player receives a total of 4 weekly downloads. As such, mirax-player popularity was classified as not popular.
We found that mirax-player demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.