mirax-player

Mirax Player

Table of Contents

• Description
• Paradigm
• Installation
• Controllers
• Usage
• React
• Vue
• Angular
• Svelte
• CSS Player
• CSS Embed
• Colors
• Features
• License
• Author

Description

Mirax Player is a framework-agnostic video player that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte. This framework-agnostic approach allows developers to incorporate Mirax Player into their projects without being bound to a specific library or framework, providing flexibility and compatibility for a diverse range of web development environments. It was written in pure JavaScript but can be implemented in both TypeScript and JavaScript.

---

Mirax Player is designed to work across multiple JavaScript frameworks without being tied to any specific one, making it a versatile choice for developers.

Paradigm

Mirax employs Object-Oriented Programming principles to organize its components effectively.

It aims to provide a consistent and adaptable video player and embedding solution.

---

Mirax Player
 Mirax libraries/scripts (Reusable scripts)
  ├── JavaScript
  ├── TypeScript
    ├── React
    ├── Vue
    ├── Angular
    ├── Svelte
      ├── Video Player/
      │   ├── Themes/
      │   │   ├── player theme
      │   │   ├── progress theme
      ├── Embed Videos/
      │   ├── Video sites/
      │   │   ├── Youtube
      │   │   ├── Vimeo

Frameworks / Library	Tested Versions	JavaScript	TypeScript
React	React 18 & above	Yes	Yes
Vue	Vue 3 & above	Yes	Yes
Angular	Angular 16 & above	No	Yes
Svelte	Svelte 4 & above	Yes	Yes

---

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 but auto appear 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

Mirax Player version 3 has major changes:

---

• You can now declare value of colors inside to your component app.

• Adding miraxCustomizer is an area to set the value of colors.

• Has ability to embed videos miraxEmbed like video links from Youtube and Vimeo.

Clip source	Usage	Responsive	Themes	Formats
local/online with file ext.	Video Player	Yes	Yes	.mp4 .mkv links
online url/links	Embed Videos	Yes	No	Url or Links

---

---

syntax for importing Mirax Player for video player or embed videos :

// Importing syntax for React, Vue, Angular, and Svelte:

import { miraxplayer, miraxEmbed } from 'mirax-player';

---

Once you finish set-up the code examples below you need to restart your server like:

npm run dev
npx ng serve

React

• Video player - CSS for Video Player

import React, { useEffect, useRef } from "react";
import { miraxplayer } from 'mirax-player';
const ExampleComponent = () => {
  const videoRef = useRef(null);
  const miraxCustomizer = {
    playerTheme: "rgba(250, 149, 35, 0.9)",
    progressTheme:  "blue"
  };
  useEffect(() => {
    if (videoRef.current) {
      miraxplayer(videoRef.current, miraxCustomizer);
    }
  }, []);
  return (
    <div className="whatever">
      <video ref={videoRef} className="mirax-player" src="clip.mp4"></video>
    </div>
  );
};
export default ExampleComponent;

• Embed videos - CSS for Embed Videos

import React, { useEffect, useRef } from "react";
import { miraxEmbed } from 'mirax-player';
const ExampleComponent = () => {
  const embedRef = useRef(null);
  useEffect(() => {
    miraxEmbed(embedRef.current);
  }, []);
  return (
    <div className="whatever-embed">
      <div className="whatever-embed-videoclip" ref={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
    </div>
  );
};
export default ExampleComponent;

• For TypeScript version: ( located at repository file )

src/react/TypeScriptComponent.md

Vue

• Video player - CSS for Video Player

<template>
  <div class="whatever">
    <video ref="videoRef" class="mirax-player" src="clip.mp4"></video>
  </div>
</template>
<script>
import { miraxplayer } from 'mirax-player';
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const videoRef = ref(null);
    const miraxCustomizer = {
      playerTheme: "none",
      progressTheme:  "orange"
    };
    onMounted(() => {
      if (videoRef.value) {
        miraxplayer(videoRef.value, miraxCustomizer);
      }
    });
    return {
      videoRef
    };
  }
};
</script>

• Embed videos - CSS for Embed Videos

---

<template>
  <div class="whatever-embed">
    <div class="whatever-embed-videoclip" ref="embedRef" mirax-embed-video="https://vimeo.com/217499569"></div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { miraxEmbed } from 'mirax-player';
export default {
  setup() {
    const embedRef = ref(null);
    onMounted(() => {
      miraxEmbed(embedRef.value);
    });
    return {
      embedRef
    };
  }
};
</script>

• For TypeScript version: ( located at repository file )

src/vue/TypeScriptComponent.md

Angular

---

• Video player - CSS for Video Player

---

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>;
  miraxCustomizer = {
    playerTheme: "rgba(228, 41, 82, 0.3)",
    progressTheme: "yellow"
  };
  ngOnInit(): void {
    this.initializeMiraxplayer();
  }
  initializeMiraxplayer() {
    if (this.video.nativeElement) {
      miraxplayer(this.video.nativeElement, this.miraxCustomizer);
    }
  }
}

---

example.component.html

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

• Embed videos - CSS for Embed Videos

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { miraxEmbed } from 'mirax-player';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  @ViewChild('embedRef', {static: true, read: ElementRef}) embedRef!: ElementRef<HTMLVideoElement>;
  constructor() { }
  ngOnInit(): void {
    miraxEmbed(this.embedRef.nativeElement);
  }
}

Svelte

• Video player - CSS for Video Player

<script>
    import { onMount } from 'svelte';
    import { miraxplayer } from 'mirax-player';
  let video;
  const miraxCustomizer = {
      playerTheme: "none",
      progressTheme:  "yellow"
  };
  $: if(video) { 
    miraxplayer(video, playerTheme, miraxCustomizer);
  }
</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>

• Embed videos - CSS for Embed Videos

<script>
import { onMount } from 'svelte';
import { miraxEmbed } from 'mirax-player';
let embedRef;
onMount(() => {
  miraxEmbed(embedRef);
});
</script>
<div class="whatever-embed">
  <div class="whatever-embed-videoclip" bind:this={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
</div>

• For TypeScript version: ( located at repository file )

src/svelte/TypeScriptComponent.md

CSS-player

You can assign your own class name to encapsulate the video player.

• Left

.whatever {
  margin: 0 auto;
  position: relative;
  width: 100%;
  float: left;
  text-align: left;
}

• Center

 .whatever {
  position: relative;
  width: 100%;
  text-align: center;
}

• Right

.whatever {
    margin: 0 auto;
    position: relative;
    width: 100%;
    float: right;
    text-align: right;
}

CSS-embed

• Add to your css file you can customize or rename it:

---

.whatever-embed {
  margin: auto 0;
  position: relative;
  width: 100%;
  max-width: 600px;
}

.whatever-embed-videoclip {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
}
.whatever-embed-videoclip iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Colors

You have the freedom to freely set a theme color.

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
HEXA	#6digits	#ff0000	none	Red
COLORNAME	colorname	red	none	Red

---

If you want pure transparent:

 const playerTheme = "none";

Features

• Play and Pause
• Easy to use
• Can embed videos
• Responsiveness
• Automatically hides the player bar
• Capable of playing videos (Portrait or Landscape)
• Supports 9:16 dimensions (Mobile video)
• Fullscreen functionality
• Adjustable volume (low or high)
• Customizable color themes
• Allows you to point and drag the timestamp anywhere within the video's duration
• Supports PIP (Picture-in-Picture)

---

License

MIT

---

Author

Demjhon Silver