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 |
Version 7.0.0
Major Changes:
Embedrax
.
Embedrax - embed videosMinor Changes:
v7.1.0
Patch Changes:
v7.0.1
v7.1.1
To install the Mirax Player, you can use the following npm command:
npm install mirax-player
mirax-player/
|-- src/
| |-- angular/
| |-- react/TypeScriptPlayer.md
| |-- svelte/TypeScriptPlayer.md
| |-- vue/TypeScriptPlayer.md
Reminder:
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)
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
<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>
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>
<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>
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>
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.
data-player-float="left"
data-player-float="" // center is default
//or
data-player-float="center"
data-player-float="right"
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"
data-player-theme = "rgba(0, 0, 0, 0)"
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 |
Demjhon Silver