mirax-player

Mirax Player

---

Table of Contents

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

Description

Mirax Player is an embed 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.

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

---

Release-notes

Version 6

Major changes:

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

Reminder:

• This is an Alpha test (experimental) aimed at simplifying code syntax.

Bugs Fixed:

• Code syntax fixing from typesript module (angular) (Tested but it has css issue)
• Embed code for vue and svelte still working on. (Tested)

Features

• Easy to use and responsive.
• Capable of embedding videos from platforms like TikTok, YouTube, YouTube Shorts, 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.
	YouTube / Shorts	Iframe Api	https://developers.google.com/youtube/iframe_api_reference
	Vimeo	Player SDK	https://developer.vimeo.com/player/sdk
	TikTok	oEmbed API	https://developers.tiktok.com/doc/embed-videos/

---

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)
videoUrl	video address, url/links	any	yes

---

• located at repository files

src/react/TypeScriptEmbed.md

Embed-css

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

.video-3, .video-4, .video-5.

.video-1 {
    display: inline-flex;
    border: 2px solid red;
    width: 100%;
    max-width: 640px;
    float: left;
  }
.video-2 {
    display: inline-flex;
    border: 2px solid blue;
    width: 100%;
    max-width: 640px;
    float: right;

}
.video-3 {
  display: inline-flex;
  border: 2px solid rgb(255, 0, 149);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: 350px;
}

Note :

The width from the video data should also be equal to the max-width of .video- in CSS.

You can embed one or more videos in any URL.

---

React

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

const ExampleComponent = () => {
  const embedWrap = useRef(null);

  useEffect(() => {
    const videos = [
      {
        width: 640,
        height: 310,
        autoplay: false,
        fullscreen: true,
        controls: true,
        videoUrl: 'https://vimeo.com/217499569',
      },
      {
        width: 640,
        height: 360,
        autoplay: true,
        fullscreen: true,
        controls: false,
        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
      },
      {
        videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
      },
    ];
    
      embed(videos, embedWrap.current);
    
  });

  return <div ref={embedWrap}></div>;
};

export default ExampleComponent;

Vue

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

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

export default {
  name: 'ExampleComponent',

  setup() {
    const embedWrap = ref(null);

    onMounted(() => {
      const videos = [
        {
          width: 640,
          height: 310,
          autoplay: false,
          fullscreen: true,
          controls: true,
          videoUrl: 'https://vimeo.com/217499569',
        },
        {
          width: 640,
          height: 360,
          autoplay: true,
          fullscreen: true,
          controls: false,
          videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
        },
        {
          videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
        },
      ];
         embed(videos, embedWrap.value);
    });

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

Angular

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

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

  constructor() {}

  ngAfterViewInit(): void {
    const videos = [
      {
        width: 640,
        height: 310,
        autoplay: false,
        fullscreen: true,
        controls: true,
        videoUrl: 'https://vimeo.com/217499569',
      },
      {
        width: 340,
        height: 410,
        autoplay: true,
        fullscreen: true,
        controls: false,
        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
      },
      {
        videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
      },
    ];

    embed(videos, this.embedWrap.nativeElement);
  }
}

Svelte

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

  const videos = [
    {
      width: 640,
      height: 310,
      autoplay: false,
      fullscreen: true,
      controls: true,
      videoUrl: 'https://vimeo.com/217499569',
    },
    {
      width: 640,
      height: 360,
      autoplay: true,
      fullscreen: true,
      controls: false,
      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
    },
    {
      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
    },
  ];

  let embedWrap;

  onMount(() => {
    embed(videos, embedWrap);
  });
</script>

<div bind:this={embedWrap}></div>

---

---

License

MIT

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

---

Author

Demjhon Silver

• Thank you for your support. 😃