Skip to content

Mirax Player is a free and open source video player for React, Vue, Angular, and Svelte.

License

Notifications You must be signed in to change notification settings

demjhonsilver/mirax-player

Repository files navigation

Logo

Mirax Player

npm version Written Downloads License


Table of Contents

Description

Mirax Player is a free video player for React, Vue, Angular, and Svelte.

Frameworks / Libraries Tested versions
React 18 & above
Vue.js 3 & above
Angular 16 & above
Svelte 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

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

MIT

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

Author

Demjhon Silver

  • Thank you for your support. 😃