mirax-player

Mirax Player

---

Disclaimer: This image is based on an example TikTok embedded video clip.

Table of Contents

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

Description

Mirax Player is a powerful free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like TikTok, YouTube/Shorts, and Vimeo. This library package enables you to set any URL once within a single embed code tag and dynamically embed videos from any video sites. It was written in pure JavaScript but can be implemented in both TypeScript and JavaScript.

Changes

• Mirax officially supports TikTok videos.
• The default width for the video player is 800x450 (HD).
• Timestamps for videos reduce the number of digits displayed in the video player.
• I removed the following CSS properties from the .whatever class: margin: 0 auto; and width: 100%;
• The player theme has been fixed for custom float issues.

---

Features

• The advantage is that this player serves as a universal tool with minimal syntax, distributed to various javascript/typescript libraries and frameworks.
• This video player supports both TypeScript and JavaScript, making it developer-friendly.
• Easy to use and responsive
• Can embed videos like TikTok, YouTube, YouTube Shorts and Vimeo via Copy link
• 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

Sites	Source type	Add-on Params	Links
YouTube / Shorts	Iframe Api	https://developers.google.com/youtube/player_parameters	https://developers.google.com/youtube/iframe_api_reference
Vimeo	Player SDK	https://developer.vimeo.com/player/sdk/embed	https://developer.vimeo.com/player/sdk
TikTok	oEmbed API	https://developers.tiktok.com/doc/embed-videos/	https://developers.tiktok.com/doc/overview/

---

Thanks to these documentations of YouTube, Vimeo, and TikTok, I was able to integrate their APIs seamlessly into this library package. 😆 👏

---

Mirax embed tags	Type	Functionality
mirax-embed-class	class name	responsiveness
data-mirax-width	attribute	dynamic width
data-mirax-height	attribute	dynamic height
data-mirax-embed	attribute	video links to embed

example:

<div className="mirax-embed-class">
  <div ref={embedVideo}
      data-mirax-width="640" // You can set any value, such as 800x450, to make it larger.
      data-mirax-height="360" //
      data-mirax-embed="https://www.tiktok.com/@scout2015/video/6718335390845095173" // links from TikTok Youtube/Shorts and Vimeo
      >
  </div>
</div>

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  public/clip.mp4 from your frameworks | assets/clip.mp4 angular | example.com/video/clip.mp4

---

React

• Video player - CSS for Video Player

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

Embed videos

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

const ExampleComponent = () => {
  const embedVideo = useRef(null);
  const youtubeParams = {
    playerVars: { 
      controls: 1,
      autoplay: 0,
      fs: 1,
      iv_load_policy: 3,
      cc_load_policy: 1 
    }
  };
  const vimeoParams = { 
    autopause: 0, 
    controls: true,
    responsive: true
  };
  useEffect(() => {
    miraxEmbed(embedVideo.current, youtubeParams, vimeoParams);
  });
  return (
    <div className="mirax-embed-class">
      <div ref={embedVideo}
          data-mirax-width="640"
          data-mirax-height="360"
          data-mirax-embed="https://vimeo.com/217499569">
      </div>
    </div>
  );
};
export default ExampleComponent;

• located at repository files

src/react/TypeScriptPlayer.md
src/react/TypeScriptEmbed.md

Vue

• Video player - CSS for Video Player

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

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

export default {
  setup() {
    const videoPlayer = ref(null);

    const miraxCustomizer = {
      playerTheme: "",
      progressTheme:  ""
    };

    onMounted(() => {
      if (videoPlayer.value) {
        miraxplayer(videoPlayer.value, miraxCustomizer);
      }
    });

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

Embed videos

<template>
  <div class="mirax-embed-class">
    <div ref="embedVideo"
        data-mirax-width="640"
        data-mirax-height="360"
        data-mirax-embed="https://vimeo.com/217499569">
    </div>
  </div>
</template>

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

export default {
  setup() {
    const embedVideo = ref(null);
    const youtubeParams = {
      playerVars: {
        controls: 1,
        autoplay: 0,
        fs: 1,
        iv_load_policy: 3,
        cc_load_policy: 1
      }
    };

    const vimeoParams = {
      autopause: 0,
      controls: true,
      responsive: true
    };

    onMounted(() => {
      if (embedVideo.value) {
        miraxEmbed(embedVideo.value, youtubeParams, vimeoParams);
      }
    });

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

• located at repository files

src/vue/TypeScriptPlayer.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('videoPlayer', { static: true }) videoPlayer!: ElementRef<HTMLVideoElement>;
  miraxCustomizer = {
    playerTheme: "",
    progressTheme: ""
  };
  ngOnInit(): void {
    this.initializeMiraxplayer();
  }
  initializeMiraxplayer() {
    if (this.videoPlayer.nativeElement) {
      miraxplayer(this.videoPlayer.nativeElement, this.miraxCustomizer);
    }
  }
}

example.component.html

---

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

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('embedVideo', { static: true }) embedVideo!: ElementRef;
  constructor() { }
  ngOnInit(): void {
    const youtubeParams = {
      playerVars: {
        controls: 1,
        autoplay: 0,
        fs: 1,
        iv_load_policy: 3,
        cc_load_policy: 1
      }
    };
    const vimeoParams = {
      autopause: 0,
      controls: true,
      responsive: true 
    };
    miraxEmbed(this.embedVideo.nativeElement, youtubeParams, vimeoParams);
  }
}

example.component.html

---

<div class="mirax-embed-class">
    <div #embedVideo 
      data-mirax-width="640"
      data-mirax-height="360"
      data-mirax-embed="https://vimeo.com/217499569">
    </div>
</div>

Svelte

• Video player - CSS for Video Player

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

  let videoPlayer;
  const miraxCustomizer = {
    playerTheme: "",
    progressTheme: ""
  };

  onMount(() => {
    if (videoPlayer) {
      miraxplayer(videoPlayer, miraxCustomizer);
    }
  });
</script>

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

Embed videos

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

  let embedVideo;
  const youtubeParams = {
    playerVars: {
      controls: 1,
      autoplay: 0,
      fs: 1,
      iv_load_policy: 3,
      cc_load_policy: 1
    }
  };
  const vimeoParams = {
    autopause: 0,
    controls: true,
    responsive: true
  };

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

<div class="mirax-embed-class">
  <div bind:this={embedVideo} data-mirax-width="640" data-mirax-height="360" data-mirax-embed="https://vimeo.com/217499569"></div>
</div>

• located at repository files

src/svelte/TypeScriptPlayer.md
src/svelte/TypeScriptEmbed.md

CSS-player

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

• Left

.whatever {
  position: relative;
  float: left;
  text-align: left;
}

• Center

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

• Right

.whatever {
    position: relative;
    float: right;
    text-align: right;
}

---

Examples:

  const miraxCustomizer = {
      playerTheme: "rgba(250, 149, 35, 0.9)",
      progressTheme:  "rgba(17, 117, 59, 0.9)"
  };

  const miraxCustomizer = {
      playerTheme: "rgb(0,0,0)",
      progressTheme:  "rgb(255, 255, 255)"
  };

  const miraxCustomizer = {
      playerTheme: "#000000",
      progressTheme:  "#00ff00"
  };

  const miraxCustomizer = {
      playerTheme: "black",
      progressTheme:  "red"
  };

If you want pure transparent:

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

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

• You can follow me on my Github account.
• You can give some free stars for this project: ⭐
• Thank you for your support. 😃