Table of Contents

• Description
• Release Notes
• Features
• Installation
• Supported Sites
• Embed Video
• TypeScript
• 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 dynamically embed videos from any video site, using any URL you like, and as many videos as you need.

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

Release-notes

Version 6.2.0

Major Changes:

• The Mirax video player has been revised.
• The Mirax embed feature is now easier to use.
• The Mirax player can embed multiple videos.
• The embed TypeScript versions are available. See TypeScript

Minor Changes:

v6.2.0

• The progress bar for video player is wider and the default color is white.
• The speed option panel is getting lower.

v6.1.0

• Examples for React embedding are based on named exports.
• Adding a dependency from Aziwork.

Patch Changes:

v6.1.2

• Margin added to the Mirax video player for responsive dimensions.

v6.1.1

• The Aziwork package has been updated to version 1.0.0.

Features

• Easy to use and responsive.
• Capable of embedding one or many videos from platforms like Facebook, TikTok, YouTube, YouTube Shorts, Twitter, Dailymotion and Vimeo.
• Supports playing videos in both portrait and landscape orientations.
• Set up once, everything is flexible.

Installation

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

npm install mirax-player

Supported-sites

Embed-video

TypeScript

• located at repository files

mirax-player/
|-- src/
|   |-- angular/
|   |-- react/TypeScriptEmbed.md
|   |-- svelte/TypeScriptEmbed.md
|   |-- vue/TypeScriptEmbed.md

Embed-css

You can add your own css set-up:

You may apply to app.css or index.css or any css file.

This is sample only, you can rename, recreate, and do something:

.embed-youtube-one-clip {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border: 2px solid orange;
  width: 100%;
  max-width: 640px;
  margin: auto; /* Center the entire container horizontally */
}

For more css embed video styles:

• located at css.md

mirax-player/
|-- src/css-embed/css.md (including Angular css)

If you want sample code for embed multiple videos?

Located at repository files ( EMBED MANY VIDEOS HERE)

mirax-player/
|-- src/
|   |-- angular/TypeScriptEmbed.md
|   |-- react/JavaScriptEmbed.md
|   |-- svelte/JavaScriptEmbed.md
|   |-- vue/JavaScriptEmbed.md

Use Google chrome as much as possible to load more videos properly.

Recommended web browser for local test:

Reminder:

• Don't forget to restart your server.

React

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

export const ExampleComponent = () => {
  useEffect(() => {
    embed([
      {
        width: 640,
        height: 360,
        autoplay: true,
        fullscreen: false,
        controls: true,
        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
        videoClass: 'embed-youtube-one-clip' 
      }
    ])
  });
  return (
    <>
      <div className="embed-youtube-one-clip"></div>
    </>
  );
};

Vue

<template>
  <div>
    <div class="embed-youtube-one-clip"></div>
  </div>
</template>

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

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

    onMounted(() => {
      embed([
        {
          width: 640,
          height: 360,
          autoplay: true,
          fullscreen: false,
          controls: true,
          videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
          videoClass: 'embed-youtube-one-clip'
        }
      ])
    });

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

Angular

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

@Component({
  selector: 'app-example',
  template: `
    <div class="embed-youtube-one-clip"></div>
  `,
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements AfterViewInit {

  ngAfterViewInit() {
    embed([
      {
          width: 640,
          height: 360,
          autoplay: true,
          fullscreen: false,
          controls: true,
          videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
          videoClass: 'embed-youtube-one-clip'
      }
    ]);
  }
}  

For Angular css:

Angular embed Css

::ng-deep .embed-youtube-one-clip {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  border: 2px solid orange;
  width: 100%;
  max-width: 640px;
  margin: auto; /* Center the entire container horizontally */
}

Svelte

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

  onMount(() => {
    embed([
      {
        width: 640,
        height: 360,
        autoplay: true,
        fullscreen: false,
        controls: true,
        videoUrl: 'https://www.youtube.com/watch?v=oEXFMGK7IC0',
        videoClass: 'embed-youtube-one-clip'
      }
    ]);
  });
</script>

<div>
  <div class="embed-youtube-one-clip"></div>
</div>

Video-player

• location of videos stored:

  public/clip.mp4 from your frameworks

  assets/clip.mp4 -Angular

  example.com/video/clip.mp4 (url)

React video player

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

export 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>
  );
};

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

License

MIT

• This library package is FREE for commercial or personal use. ❤️

Author

Demjhon Silver

• Thank you for your support. 😃