mirax-player

Mirax Player

---

Table of Contents

• Description
• Release Notes
• Features
• Installation
• Supported Sites
• Embed Video
• Embed Css
• React
• Vue
• Angular
• Svelte
• Video Player
• CSS Player
• Colors
• License
• Author

Description

Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like Facebook, TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion. This library package enables you to set any URL once within a single embed code tag and dynamically embed videos from any video sites.

Frameworks / Library	Tested versions
	18 & above
	3 & above
	16 & above
	3 & above

---

Release-notes

Version 6

Major changes:

• Mirax video player has been revised.
• Mirax embed is now easier to use.
• Mirax player can embed multiple videos.

Minor changes:

• The Props for the player are more aligned with short naming conventions."
• Fullscreen mode will back to standard set-up."

Patch changes:

• Some icons for video player has been changed.
• Embed syntax can be shorten or declare the data videos outside.

Features

• Easy to use and responsive.
• Capable of embedding videos from platforms like Facebook, TikTok, YouTube, YouTube Shorts, Twitter, Dailymotion and Vimeo.
• Supports playing videos in both portrait and landscape orientations.

---

Installation

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

npm install mirax-player

Supported-sites

Logo	Sites	Source type	Docs.
	Facebook	Iframe Plugins	https://developers.facebook.com/docs/plugins/embedded-video-player
	Twitter / X	JavaScript API	https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
	YouTube / Shorts	Iframe Api	https://developers.google.com/youtube/iframe_api_reference
	TikTok	oEmbed API	https://developers.tiktok.com/doc/embed-videos/
	Vimeo	Player SDK	https://developer.vimeo.com/player/sdk
	Dailymotion	oEmbed API	https://developers.dailymotion.com/player/#player-oembed

---

Embed-video

Props	Functionality	Type	Required
width	dynamic width	integer	yes !tiktok
height	dynamic height	integer	yes !tiktok
fullscreen	enable fullscreen	boolean	optional (true false)
controls	enable controllers	boolean	optional (true false )
autoplay	enable autoplay	boolean	optional (true false)
loop	enable loop	boolean	optional (true false)
videoClass	set any classname	any	yes
videoUrl	video address, url/links	any	yes

---

Video HTML Element

videoContainer to fetch data videos

---

Recommended web browser local test:

Google chrome

• located at repository files

src/react/TypeScriptEmbed.md

Embed-css

You can add to your index.css or app.css or any imported css stylesheet files.

You can rename and set many class names based on the total embed videos : ex.

my-twitter or any-tw or my-name-twitter

you must also declare in your component:

videoClass: 'my-twitter',

You can resize the max-width or width or float anywhere.

---

.custom-twitter {
  position: relative;
  display: block;
  margin:  auto;
  border: 2px solid red;
  width: 100%;
  max-width: 300px;
}

.custom-facebook {
  display: inline-flex;
  position: relative;
  border: 2px solid purple;
  width: 100%;
  max-width: 640px;
  max-height: 360; /* Allow the height to adjust proportionally */
  float:right;
}

.custom-youtube {
  position: relative;
  display: inline-flex;
  border: 2px solid blue;
  width: 100%;
  max-width: 640px;
  float: left;
}

.custom-tiktok {

  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border: 2px solid rgb(212, 20, 171);
  width: 100%;
  max-width: 340px;
  margin: auto; /* Center the entire container horizontally */
}

.custom-vimeo {
  position: relative;
  display: inline-flex;
  border: 2px solid green;
  width: 100%;
  max-width: 640px;
}

.custom-dailymotion {
  display: inline-flex;
  position: relative;
  border: 2px solid purple;
  width: 100%;
  max-width: 640px;
  height: auto; /* Allow the height to adjust proportionally */
  float:right;
}

You can embed one or more videos in any URL.

If you want sample code for embed multiple videos?

mirax-player/
|-- dist/
|-- src/
|   |-- angular/
|   |-- react/
|   |-- svelte/
|   |-- vue/
|-- LICENSE.md/
|-- README.md/

Located at repository files ( EMBED MANY VIDEOS )

src/react/JavaScriptEmbed.md
src/vue/JavaScriptEmbed.md
src/svelte/JavaScriptEmbed.md
src/angular/TypeScriptEmbed.md

---

Reminder:

• Don't forget to restart your server.

---

React

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

const ExampleComponent = () => {
  const videoContainer = useRef(null);
  useEffect(() => {
    embed([
      {
        width: 300,
        height: 600,
        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
        videoClass: 'custom-twitter',
      }
    ], videoContainer.current);
  });
  return (
    <>
    <div ref={videoContainer}>
    </div>
    </>
  );
};
export default ExampleComponent;

Vue

<template>
  <div>
    <div ref="videoContainer"></div>
  </div>
</template>

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

export default {
  name: 'ExampleComponent',
  setup() {

    const videoContainer = ref(null);

    onMounted(() => {
      embed([
        {
          width: 300,
          height: 600,
          videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
          videoClass: 'custom-twitter',
        }
      ], videoContainer.value);
    });

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

Angular

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

@Component({
  selector: 'app-example',
  template: '<div #videoContainer></div>',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('videoContainer', { static: false }) videoContainer!: ElementRef;

  constructor() {}

  ngAfterViewInit(): void {
    embed([
      { 
        width: 300,
        height: 600,
        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
        videoClass: 'custom-twitter',
      }
    ], this.videoContainer.nativeElement);
  }
}

For Angular css:

add: ::ng-deep

/* example/component.css */

::ng-deep .custom-twitter {
  position: relative;
  display: block;
  margin:  auto;
  border: 2px solid red;
  width: 100%;
  max-width: 300px;
}

::ng-deep .custom-facebook {
  display: inline-flex;
  position: relative;
  border: 2px solid purple;
  width: 100%;
  max-width: 640px;
  max-height: 360; /* Allow the height to adjust proportionally */
  float:right;
}

::ng-deep .custom-youtube {
  position: relative;
  display: inline-flex;
  border: 2px solid blue;
  width: 100%;
  max-width: 640px;
  float: left;
}

::ng-deep .custom-tiktok {

  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border: 2px solid rgb(212, 20, 171);
  width: 100%;
  max-width: 340px;
  margin: auto; /* Center the entire container horizontally */
}

::ng-deep .custom-vimeo {
  position: relative;
  display: inline-flex;
  border: 2px solid green;
  width: 100%;
  max-width: 640px;
}

::ng-deep .custom-dailymotion {
  display: inline-flex;
  position: relative;
  border: 2px solid purple;
  width: 100%;
  max-width: 640px;
  height: auto; /* Allow the height to adjust proportionally */
  float:right;
}

Svelte

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

  const videos = ;

  let videoContainer;
  onMount(() => {
    embed([
      {
        width: 300,
        height: 600,
        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
        videoClass: 'custom-twitter',
      }
    ], videoContainer);
  });
</script>
<div bind:this={videoContainer}></div>

Video-player

Player Props	Functionality	Type	Required
player-selector	responsiveness	any	yes
data-player-width	dynamic width	integer	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 video player

import React, { 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="800"
        src="clip.mp4">
      </video>
    </div>
  );
};
export default ExampleComponent;

Vue video player

<template>
  <div class="player-selector">
    <video ref="playerDiv"
      class="mirax-player"
      data-player-width="800"
      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 video player

---

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="800"
      src="assets/clip.mp4">
    </video>
  </div>

Svelte video player

<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="800"
      src="clip.mp4">
    <track kind="captions" src="" label="English" default>
  </video>
</div>

CSS-player

• 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
HEXA	#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. 😃