mirax-player
v7.1.1
Published
A free video player compatible with React, Vue, Angular, and Svelte.
Downloads
106
Maintainers
Readme
Mirax Player
Table of Contents
- Description
- Release Notes
- Features
- Installation
- TypeScript
- React
- Vue
- Angular
- Svelte
- Video Player
- CSS Player
- Colors
- License
- Author
Description
Mirax Player is a free video player for React, Vue, Angular, and Svelte.
Frameworks / Libraries | Tested versions ------ | -------- | | 18 & above | 3 & above | 16 & above | 3 & above
Release-notes
Version 7.0.0
Major Changes:
- The Mirax video player remains the focus as the media player service, although you can still change the color.
- The buttons for forward, backward, and play have been changed into simple shapes.
- The player button moves to the left side.
- The embed feature has been removed and transferred to another package named
Embedrax
. Embedrax - embed videos
Minor Changes:
v7.1.0
- Remap the spacebar to function as the play button.
Patch Changes:
v7.0.1
- Just adjusted the arrow icons to be more responsive.
v7.1.1
- The forward and backward buttons decrease the size.
- The progress bar has a translucent line.
Features
- Easy to use and responsive.
- Can change the color of the video player.
- The width can be set to a minimum of 370 and a maximum of 1038.
Installation
To install the Mirax Player, you can use the following npm command:
npm install mirax-player
TypeScript
- located at repository files
mirax-player/
|-- src/
| |-- angular/
| |-- react/TypeScriptPlayer.md
| |-- svelte/TypeScriptPlayer.md
| |-- vue/TypeScriptPlayer.md
Reminder:
- Don't forget to restart your server.
Video-player
Player Attributes | Functionality |Type | Required |
------ | -------- | ----------- | ----------
player-selector
| responsiveness | any| yes
data-player-width
| dynamic width | number | yes
data-player-float
| dynamic alignment | string |optional
data-player-theme
| player color | any | optional
data-player-bar
| progress bar color | any | optional
Keyboard shortcuts| Functions | Description
---- | ---------------------- | -----------
press space bar
| Play & Pause |The video will play or pause
press alt+p
| PiP | Picture in Picture screen
press left arrow key
| rewind clip | backward for 10 sec.
press right arrow key
| advance clip | forward for 10 sec.
location of videos stored:
public/clip.mp4 from your frameworks
assets/clip.mp4 -Angular
example.com/video/clip.mp4 (url)
React
import { useEffect, useRef } from "react";
import { miraxPlayer } from 'mirax-player';
export const ExampleComponent = () => {
const playerDiv = useRef(null);
useEffect(() => {
miraxPlayer(playerDiv.current);
});
return (
<>
<div className="player-selector">
<video className="mirax-player" ref={playerDiv}
data-player-width="1038"
src="clip.mp4">
</video>
</div>
</>
);
};
or
import { useEffect, useRef } from "react";
import { miraxPlayer } from 'mirax-player';
const ExampleComponent = () => {
const playerDiv = useRef(null);
useEffect(() => {
miraxPlayer(playerDiv.current);
});
return (
<>
<div className="player-selector">
<video className="mirax-player" ref={playerDiv}
data-player-width="1038"
src="clip.mp4">
</video>
</div>
</>
);
};
export default ExampleComponent
Vue
<template>
<div class="player-selector">
<video ref="playerDiv"
class="mirax-player"
data-player-width="1038"
src="clip.mp4">
</video>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
import { miraxPlayer } from 'mirax-player';
export default {
setup() {
const playerDiv = ref(null);
onMounted(() => {
miraxPlayer(playerDiv.value);
});
return {
playerDiv
};
}
};
</script>
Angular
example.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { miraxPlayer } from 'mirax-player';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements AfterViewInit {
@ViewChild('playerDiv', { static: true }) playerDiv!: ElementRef<HTMLVideoElement>;
ngAfterViewInit(): void {
this.initializemiraxPlayer();
}
initializemiraxPlayer() {
miraxPlayer(this.playerDiv.nativeElement);
}
}
example.component.html
<div class="player-selector">
<video #playerDiv
class="mirax-player"
data-player-width="1038"
src="assets/clip.mp4">
</video>
</div>
Svelte
<script>
import { onMount } from 'svelte';
import { miraxPlayer } from 'mirax-player';
let playerDiv;
onMount(() => {
miraxPlayer(playerDiv);
});
</script>
<div class="player-selector">
<video bind:this={playerDiv} class="mirax-player"
data-player-width="1038"
src="clip.mp4">
<track kind="captions" src="" label="English" default>
</video>
</div>
CSS-player
example:
<video className="mirax-player" ref={playerDiv}
data-player-width="800"
data-player-theme="rgba(250, 149, 35, 0.8)" // it's okay if it's not include
data-player-bar="rgba(17, 117, 59, 0.9)" // it's okay if it's not include
src="clip.mp4">
</video>
To choose from many colors:
you can simply search on Google. Just type:
html color hex codes
html color hex palette
or
html color rgba codes
html color rgba palette
and copy it.
- Left
data-player-float="left"
- Center
data-player-float="" // center is default
//or
data-player-float="center"
- Right
data-player-float="right"
Examples:
data-player-theme="rgba(250, 149, 35, 0.9)"
data-player-bar="rgba(17, 117, 59, 0.9)"
data-player-theme="rgb(0,0,0)"
data-player-bar="rgb(255, 255, 255)"
data-player-theme="#000000"
data-player-bar="#00ff00"
data-player-theme="black"
data-player-bar="red"
If you want pure transparent:
data-player-theme = "rgba(0, 0, 0, 0)"
Colors
Color Types | Color syntax | Example | Opacity Range | Appearance
---------- | --------- | ---------------- | -------------------- | ---------------
RGBA
| rgba() | rgba(255,0,0, 0.5) | 0.1 to 0.9
or 0 and 1
| Red half transparency
RGB
|rgb() | rgb(255, 0, 0) | none
| Red
HEX
| #6digits | #ff0000| none
| Red
COLORNAME
| colorname | red | none
| Red
License
- This library package is FREE for commercial or personal use. ❤️
Author
Demjhon Silver
- Thank you for your support. 😃