mirax-player

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-alpha1

Major Changes:

The Mirax video player focus as the media player service.
The buttons for forward, backward and play has been changed into simple shape.
Embed feature has been remove but move to another package named `Embedrax`.

Embedrax - embed videos

Features

• Easy to use and responsive.
• Width can be set minimum 370 and the maximum will be 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 ctrl + 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 video player

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="800"
        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="800"
        src="clip.mp4">
      </video>
    </div>
  );
};

export default ExampleComponent

Vue video player

<template>
  <div class="player-selector">
    <video ref="playerDiv"
      class="mirax-player"
      data-player-width="800"
      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 video player

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="800"
      src="assets/clip.mp4">
    </video>
  </div>

Svelte video player

<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="800"
      src="clip.mp4">
    <track kind="captions" src="" label="English" default>
  </video>
</div>

CSS-player

example:

      <video className="mirax-player" ref={playerDiv}
        data-player-width="700"
        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 many colors:

you can search in google, just type:

html color hex codes html color hex pallete

or

html color rgba codes html color rgba pallete

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

MIT

• This library package is FREE for commercial or personal use. ❤️

Author

Demjhon Silver

• Thank you for your support. 😃