mirax-player

Mirax Player

Table of Contents

• Description
• Changes
• Features
• Installation
• Embed
• Player
• React
• Vue
• Angular
• Svelte
• CSS Player
• CSS Embed
• Colors
• License
• Author

Description

Mirax Player is an adaptable video player and embedding solution that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte. It was written in pure JavaScript but can be implemented in both TypeScript and JavaScript.

Changes

• You can declare your color themes inside to your component.
• Embed videos has controller based on developer's documentation See
• New logo
• Minimize theme player UI

Features

• Easy to use and responsive
• Can embed videos like YouTube and Vimeo
• Capable of playing videos (Portrait or Landscape)
• Supports 9:16 dimensions (Mobile video)
• Fullscreen functionality
• Customizable color themes
• Supports PIP (Picture-in-Picture)

---

Installation

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

npm install mirax-player

Embed

Embed Sites	Source type	link	Controller Params
YouTube	Iframe Api	https://developers.google.com/youtube/iframe_api_reference	https://developers.google.com/youtube/player_parameters
Vimeo	Player SDK	https://developer.vimeo.com/player/sdk	https://developer.vimeo.com/player/sdk/embed

input:

mirax-embed-video=" " // Link from YouTube or Vimeo

Player

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

input:

src=" " // Link example.com/video/my.mp4 or clip.mp4

---

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 Video

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

const ExampleComponent = () => {
  const embedVideoRef = useRef(null);
  const embedPlayerReady = (event) => {
    event.target.playVideo();
  };
  const youtubeParams = {
    width: 1000, height: 660,
    playerVars: { 
      controls: 1,
      autoplay: 0,
      fs: 1,
      iv_load_policy: 3,
      cc_load_policy: 1 
    },
    events: { 
      onReady: embedPlayerReady
    },
  };
  const vimeoParams = { 
    width: 1300, 
    height: 760, 
    autopause: 0, 
    controls: true,
    responsive: true
  };
  useEffect(() => {
    miraxEmbed(embedVideoRef.current, youtubeParams, vimeoParams);
  }, []);
  return (
    <div className="embed_clip">
      <div ref={embedVideoRef} mirax-embed-video="https://vimeo.com/217499569">
      </div>
    </div>
  );
};
export default ExampleComponent;

• For TypeScript version: ( located at repository file )

src/react/TypeScriptComponent.md
src/react/TypeScriptEmbed.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 Video

---

<template>
 <div class="embed_clip">
    <div ref="embedVideoRef" mirax-embed-video="https://vimeo.com/217499569">
    </div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { miraxEmbed } from 'mirax-player';

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

    const embedPlayerReady = (event) => {
      event.target.playVideo();
    };

    onMounted(() => {
      const youtubeParams = {
        width: 1000,
        height: 660,
        playerVars: {
          controls: 1,
          autoplay: 0,
          fs: 1,
          iv_load_policy: 3,
          cc_load_policy: 1
        },
        events: { onReady: embedPlayerReady }
      };

      const vimeoParams = {
        width: 1000,
        height: 660,
        autopause: 0,
        controls: true,
        responsive: true 
      };

      miraxEmbed(embedVideoRef.value, youtubeParams, vimeoParams);
    });

    return {
      embedVideoRef,
    };
  },
};
</script>

• For TypeScript version: ( located at repository file )

src/vue/TypeScriptComponent.md
src/vue/TypeScriptEmbed.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 Video

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('embedVideoRef', { static: true }) embedVideoRef!: ElementRef;
  constructor() { }
  ngOnInit(): void {
    const youtubeParams = {
      width: 1000,
      height: 660,
      playerVars: {
        controls: 1,
        autoplay: 0,
        fs: 1,
        iv_load_policy: 3,
        cc_load_policy: 1
      },
      events: { onReady: this.embedPlayerReady.bind(this) }
    };
    const vimeoParams = {
      width: 1000,
      height: 660,
      autopause: 0,
      controls: true,
      responsive: true
    };
    miraxEmbed(this.embedVideoRef.nativeElement, youtubeParams, vimeoParams);
  }
  embedPlayerReady(event: any): void {
    event.target.playVideo();
  }
}

---

example.component.html

<div class="embed_clip">
  <div #embedVideoRef mirax-embed-video="https://vimeo.com/217499569"></div>
</div>

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 Video

<script>
  import { onMount } from 'svelte';
  import { miraxEmbed } from 'mirax-player';
  let embedVideoRef;
  const embedPlayerReady = (event) => {
    event.target.playVideo();
  };

  const youtubeParams = {
    width: 600,
    height: 460,
    playerVars: {
      controls: 1,
      autoplay: 0,
      fs: 1,
      iv_load_policy: 3,
      cc_load_policy: 1
    },
    events: { onReady: embedPlayerReady }
  };

  const vimeoParams = {
    width: 1300,
    height: 760,
    autopause: 0,
    controls: true,
    responsive: true
  };

  onMount(() => {
    miraxEmbed(embedVideoRef, youtubeParams, vimeoParams);
  });
</script>

<div class="embed_clip">
  <div  bind:this={embedVideoRef} mirax-embed-video="https://vimeo.com/217499569">
</div>
</div>

• For TypeScript version: ( located at repository file )

src/svelte/TypeScriptComponent.md
src/svelte/TypeScriptEmbed.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;
}

If you want pure transparent:

 const playerTheme = "rgba(0, 0, 0, 0)";

CSS-embed

• Add to your css file to make more responsive:

---

.embed_clip {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.embed_clip iframe,
.embed_clip object,
.embed_clip embed {
  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

---

License

MIT

---

Author

Demjhon Silver