mirax-player

Mirax Player

---

Table of Contents

• Description
• Installation
• Controllers
• Usage
• React
• Vue
• Angular
• Svelte
• Style
• Colors
• Features
• License
• Author

Description

Mirax Player is a video player has compatibility of typescript and javascript for React, Vue, Angular and Svelte. You can customize the theme color of the video player. Robust and easy to implement with readability syntax and light-weight.

Supported scripts:

Compatibility for web browsers:

---

Installation

To install the Mirax Player, you can use the following npm command:

npm install mirax-player

---

Controllers

Keyboard keys / buttons	Functions	Description	Supported Browsers
space bar	Play & Pause	The video will play or pause	All browsers
click ▶	Play & Pause	The video will play or pause	All browsers
alt+p or cmd+p	PiP	Picture in Picture screen	!firefox auto pip icon
click Γ	PiP	Picture in Picture screen	All browsers
double click the video	Fullscreen	It will set as fullscreen mode	All browsers
click ❐	Fullscreen	It will set as fullscreen mode	All browsers
swipe for volume	Volume	To adjust the volume level	All browsers
swipe for time frame	Progress bar	To adjust video frame timestamp	All browsers

---

Usage

In your component

---

Then use it from Mirax Player:

//both react,vue, angular and svelte importing syntax

import { miraxplayer } from 'mirax-player';

// for React (video file stored: public/clip.mp4)
  const video = useRef(null);
//
// for Vue (video file stored: public/clip.mp4)
    const video = ref(null);
//
// for Angular (video file stored: src/assets/clip.mp4)
  @ViewChild('video', { static: true }) video!: ElementRef<HTMLVideoElement>;
//
// for Svelte (video file stored: public/clip.mp4)
   let video;
//

React

You need to use useRef in React hooks:

import React, { useEffect, useRef } from 'react';
import { miraxplayer } from 'mirax-player';

const ExampleComponent = () => {
  const video = useRef(null);
  useEffect(() => {
    if (video.current) {
      miraxplayer(video.current);
    }
  }, []);

  return (
    <div className='whatever'>
      <video ref={video} className="mirax-player" src="clip.mp4"></video>
    </div>
  );
};
export default ExampleComponent;

Typescript: React

import React, { useEffect, useRef } from 'react';
import { miraxplayer } from 'mirax-player';

const ExampleComponent: React.FC = () => {
  const video = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    if (video.current) {
      miraxplayer(video.current);
    }
  }, []);
  
  return (
    <div className='whatever'>
      <video ref={video} className="mirax-player" src="clip.mp4"></video>
    </div>
  );
};
export default ExampleComponent;

Vue

---

You need to use ref in Vue attributes:

<template>
  <div class="whatever">
    <video ref="video" class="mirax-player" src="clip.mp4"></video>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { miraxplayer } from 'mirax-player';

export default {
  name: 'ExampleComponent',
  setup() {
    const video = ref(null);

    onMounted(() => {
      if (video.value) {
        miraxplayer(video.value);
      }
    });

    return {
      video
    };
  }
};
</script>

Typescript: Vue

<template>
  <div class="whatever">
    <video ref="video" class="mirax-player" src="clip.mp4"></video>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue';
import { miraxplayer } from 'mirax-player';

export default {
  name: 'ExampleComponent',
  setup() {
    const video = ref<HTMLVideoElement | null>(null);

    onMounted(() => {
      if (video.value) {
        miraxplayer(video.value);
      }
    });

    return {
      video
    };
  }
};
</script>

Angular

---

You need to use ElementRef native DOM element:

example.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { miraxplayer } from 'mirax-player';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})

export class ExampleComponent implements OnInit {
  
  @ViewChild('video', { static: true }) video!: ElementRef<HTMLVideoElement>;
  ngOnInit(): void {
    this.initializeMiraxplayer();
  }
  initializeMiraxplayer() {
    if (this.video.nativeElement) {
      miraxplayer(this.video.nativeElement);
    }
  }

}

---

example.component.html

<div>
  <div class="whatever">
    <video #video class="mirax-player" src="assets/clip.mp4"></video>
  </div>
</div>

Svelte

You need to use bind:this in svelte:

<script>
    import { onMount } from 'svelte';
    import { miraxplayer } from 'mirax-player';

    let video;
  
    onMount(() => {
      if (video) {
        const miraxPlayer = miraxplayer(video);
      }
    });
</script>
  
  <div>
    <div class='whatever'>
      <video bind:this={video} class="mirax-player" src="clip3.mp4">
        <track kind="captions" src="" label="English" default>
      </video>
    </div>
  </div>

Typescipt: Svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { miraxplayer } from 'mirax-player';

  let video: HTMLVideoElement | undefined;

  onMount(() => {
    if (video) {
      const miraxPlayer = miraxplayer(video);
    }
  });
</script>

<div>
  <div class='whatever'>
    <video bind:this={video} class="mirax-player" src="clip.mp4">
      <track kind="captions" src="" label="English" default>
    </video>
  </div>
</div>

---

To customize the alignment of video:

• note: .whatever, you can rename it, just make sure the classname in your component also replace it.

---

// in React 
 <div className='whatever'>
        <video ref={video} className="mirax-player" src="clip.mp4"></video>
</div>

// in Vue 
<div class="whatever">
      <video ref="video" class="mirax-player" src="clip.mp4"></video>
 </div>

// in Angular
  <div class="whatever">
    <video #video class="mirax-player" src="assets/clip.mp4"></video>
  </div>

// in Svelte
 <div class='whatever'>
   <video bind:this={video} class="mirax-player" src="clip.mp4">
      <track kind="captions" src="" label="English" default>
   </video>
 </div>

---

Left Alignment: ( 3 progress syntax should be remain )

.whatever {
  margin: 0 auto;
  position: relative;
  width: 100%;
  text-align: left;
}
.mirax-theme {
  float: left!important;
  background-color: rgba(36, 22, 223, 0.5)!important;
}
progress::-webkit-progress-value {
  background-color: rgb(65, 7, 224, 0.9)!important;
} 
progress[value]::-moz-progress-bar {
  background-color: rgb(65, 7, 224, 0.9)!important;
}
progress::-ms-fill {
  background-color: rgb(65, 7, 224, 0.9)!important;
}

---

Center Alignment: ( 3 progress syntax should be remain )

.whatever {
  margin: 0 auto;
  position: relative;
  width: 100%;
  text-align: center;
}
.mirax-theme {
  margin: 0 auto!important;
  background-color: rgba(36, 22, 223, 0.5)!important;
}
progress::-webkit-progress-value {
  background-color: rgb(65, 7, 224, 0.9)!important;
}
progress[value]::-moz-progress-bar {
  background-color: rgb(65, 7, 224, 0.9)!important;
}
progress::-ms-fill {
  background-color: rgb(65, 7, 224, 0.9)!important;
}

---

Right Alignment: ( 3 progress syntax should be remain )

.whatever {
  margin: 0 auto;
  position: relative;
  width: 100%;
  text-align: right;
}
.mirax-theme {
  float: right!important;
  background-color: rgba(36, 22, 223, 0.5)!important;
}
progress::-webkit-progress-value {
  background-color: rgb(65, 7, 224, 0.9)!important;
} 
progress[value]::-moz-progress-bar {
  background-color: rgb(65, 7, 224, 0.9)!important;
}
progress::-ms-fill {
  background-color: rgb(65, 7, 224, 0.9)!important;
}

---

Style

You can set your own class name to wrap the video player

.whatever {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

---

Colors

You have freedom to set a theme color for free.

Color Types	Color syntax	Example	Opacity Range	Appearance
RGBA	rgba()	rgba(255,0,0, 0.5)	0.1 to 0.9 or 0 to 1	Red half transparency
RGB	rgb()	rgb(255, 0, 0)	none	Red
HEXA	#	#ff0000	none	Red
COLORNAME	colorname	red	none	Red

---

To change color and theme, just add to your css file

Reminder for progress bar: 3 progress syntax must declared

progress::-webkit-progress-value {
  //change color here
} 
progress[value]::-moz-progress-bar {
  //change color here
}
progress::-ms-fill {
  //change color here
}

---

- note always put !important at the end of statement.

.mirax-theme {
    background-color: rgba(4, 88, 25, 0.2)!important;
}
progress::-webkit-progress-value {
    background-color: rgb(252, 227, 7)!important;
} 
progress[value]::-moz-progress-bar {
    background-color: rgb(252, 227, 7)!important;
}
progress::-ms-fill {
    background-color: rgb(252, 227, 7)!important;
}

---

if you want pure transparent, mirax-theme only:

change into:

.mirax-theme {
 background: none !important;
}

---

Sample themes:

---

.mirax-theme {
  background-color: purple!important;
}
progress::-webkit-progress-value {
  background-color: lime!important;
} 
progress[value]::-moz-progress-bar {
  background-color: lime!important;
}
progress::-ms-fill {
  background-color: lime!important;
}

---

.mirax-theme {
  background-color: rgba(250, 149, 35, 0.9)!important;
}
progress::-webkit-progress-value {
  background-color: rgb(17, 117, 59)!important;
} 
progress[value]::-moz-progress-bar {
  background-color: rgb(17, 117, 59)!important;
}
progress::-ms-fill {
  background-color: rgb(17, 117, 59)!important;
}

---

.mirax-theme {
  background: none !important;
}
progress::-webkit-progress-value {
  background-color: rgba(253, 75, 90, 0.897)!important;
} 
progress[value]::-moz-progress-bar {
  background-color: rgba(253, 75, 90, 0.897)!important;
}
progress::-ms-fill {
  background-color: rgba(253, 75, 90, 0.897)!important;
}

---

.mirax-theme {
  background: none !important;
}
progress::-webkit-progress-value {
  background-color: rgba(250, 234, 5, 0.7)!important;
} 
progress[value]::-moz-progress-bar {
  background-color: rgba(250, 234, 5, 0.7)!important;
}
progress::-ms-fill {
  background-color: rgba(250, 234, 5, 0.7)!important;
}

---

Features

• Play and Pause
• Responsive
• Auto hide the player bar
• Can play videos (Portrait or Landscape)
• 9:16 dimension supported (Mobile video)
• Fullscreen
• Adjust the volume (low or high)
• Can change color themes
• You can point and drag the timestamp in video time duration anywhere
• PIP supported (picture in picture) will play the clip even if you leave the tab open for new app

---

License

MIT

---

Author

Demjhon Silver