Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

mirax-player

Package Overview
Dependencies
Maintainers
1
Versions
144
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mirax-player - npm Package Compare versions

Comparing version 5.0.0 to 6.0.0-alpha.1

530

dist/miraxEmbedder.js
const embedTwitter = (urlSource) => {
function extractTwitterTweetId(url) {
const regex = /\/status\/(\d+)/;
const match = url.match(regex);
if (match && match[1]) {
return match[1];
} else {
return null; // No match found
}
}
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
const tweetId = extractTwitterTweetId(videoUrl);
const emWidth = urlSource.getAttribute("data-mirax-embed-width");
const emHeight = urlSource.getAttribute("data-mirax-embed-height");
const inputEmbedClip = document.createElement("style");
document.head.appendChild(inputEmbedClip);
const inputEmbedClipStyle = `
.class-mirax-embed {
position: relative;
width: 100%;
max-width: ${emWidth}px;
height: ${emHeight}px;
margin: 0 auto;
overflow: hidden;
}
.class-mirax-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle));
try {
// Create a div to hold the embedded tweet
const tweetContainer = document.createElement("div");
urlSource.appendChild(tweetContainer);
// Set the ID for the tweet container
tweetContainer.id = `tweet-${tweetId}`;
// Add the Twitter widget script to the page and wait for it to load
const twitterWidgetScript = document.createElement("script");
twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
twitterWidgetScript.charset = "utf-8";
twitterWidgetScript.async = true;
// Attach a load event listener to the script
twitterWidgetScript.addEventListener("load", () => {
// The Twitter widget script has loaded, and the tweet is now embedded.
// You can perform any additional actions here if needed.
window.twttr.widgets.createTweet(tweetId, tweetContainer);
});
document.body.appendChild(twitterWidgetScript);
} catch (error) {
console.error("Error embedding Twitter content:", error);
}
const embed = (videos, mutation) => {
videos
.filter((video) => !mutation.current.has(video.videoUrl))
.map((video, index) => {
const videoClass = `video-${index + 1}`;
embedVideos({ ...video, videoClass });
mutation.current.add(video.videoUrl);
});
};
// Function to embed a Dailymotion video using oEmbed
const embedDailymotion = (urlSource) => {
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
const emWidth = urlSource.getAttribute("data-mirax-embed-width");
const emHeight = urlSource.getAttribute("data-mirax-embed-height");
const inputEmbedClip = document.createElement('style');
document.head.appendChild(inputEmbedClip);
const inputEmbedClipStyle = `
.class-mirax-embed {
position: relative;
width: 100%;
max-width: ${emWidth}px;
height:${emHeight}px;
margin: 0 auto;
overflow: hidden;
}
.class-mirax-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle));
// Create a script element for the JSONP request
const script = document.createElement("script");
script.src = `https://www.dailymotion.com/services/oembed/?url=${encodeURIComponent(
videoUrl
)}&format=json&callback=handleDailymotionResponse`;
// Define a global callback function to handle the response
window.handleDailymotionResponse = (data) => {
if (data.html) {
urlSource.innerHTML = data.html;
}
// Clean up the script element and callback function
document.body.removeChild(script);
delete window.handleDailymotionResponse;
};
// Append the script element to the document to trigger the JSONP request
document.body.appendChild(script);
};
const embedTiktok = (urlSource) => {
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
// Fetch oEmbed data from TikTok's API
fetch(`https://www.tiktok.com/oembed?url=${encodeURIComponent(videoUrl)}`)
.then((response) => response.json())
.then((data) => {
if (data.html) {
data.html = data.html.replace(/<script[^>]*>.*<\/script>/gi,"");
}
urlSource.innerHTML =data.html;
const miraxBinderTikTok = document.createElement("script");
miraxBinderTikTok.src = "https://www.tiktok.com/embed.js";
document.body.appendChild(miraxBinderTikTok);
})
.catch((error) => {
console.error(error);
});
};
// Function to extract YouTube video ID from a URL

@@ -189,5 +21,4 @@ const extractYouTubeVideoId = (url) => {

// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (videoIdMatch && videoIdMatch[2].length === 11) {

@@ -200,70 +31,73 @@ return videoIdMatch[2];

// Variable to track if the YouTube API is loaded
// youtubeEmbed.js
// Variable to track if the YouTube API is loaded
let isYouTubeApiLoaded = false;
// Variable to track the video count
let videoCount = 1;
const embedYouTube = (video) => {
const videoId = extractYouTubeVideoId(video.videoUrl);
// Create a div element for the video player
const playerDiv = document.createElement("div");
// Function to embed a YouTube video
const embedYouTube = (urlSource) => {
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
const emWidth = urlSource.getAttribute("data-mirax-embed-width");
const emHeight = urlSource.getAttribute("data-mirax-embed-height");
// Generate a dynamic class name like "video-1", "video-2", etc.
playerDiv.className = `video-${videoCount}`;
// Increment the video count for the next video
videoCount++;
const inputEmbedClip = document.createElement('style');
document.head.appendChild(inputEmbedClip);
const inputEmbedClipStyle = `
.class-mirax-embed {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
position: relative;
width: 100%;
max-width: ${emWidth}px;
height: ${emHeight}px;
overflow: hidden;
text-align: center;
}
.class-mirax-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle));
// Set the data attributes for the player div
playerDiv.dataset.eWidth = video.width;
playerDiv.dataset.eHeight = 200;
playerDiv.dataset.efullscreen = video.fullscreen;
playerDiv.dataset.eVideoId = videoId;
// Append the player div to the document body
document.body.appendChild(playerDiv);
// Allow fullscreen if the fullscreen property is true
const autoplayValue = video.autoplay ? 1 : 0;
const muteValue = video.autoplay ? 1 : video.muted;
// Function to create the YouTube player once the API is ready
const createPlayer = () => {
if (window.YT && window.YT.Player) {
initializeYouTubeAPI(playerDiv, videoId, {
width: video.width,
height: video.height,
fullscreen: video.fullscreen ? 1 : 0,
controls: video.controls ? 1 : 0,
autoplay: autoplayValue,
muted: muteValue,
loop: video.loop ? 1 : 0,
});
}
};
const videoId = extractYouTubeVideoId(videoUrl);
// Check if the YouTube iframe API is already available
if (window.YT && window.YT.Player) {
initializeYouTubeAPI(urlSource, videoId, {
width: emWidth, // Use the e-width attribute
height: emHeight, // Use the e-height attribute
});
if (window.YT && window.YT.Player && isYouTubeApiLoaded) {
createPlayer();
} else {
// Define the callback function when the YouTube iframe API is ready
window.onYouTubeIframeAPIReady = () => {
initializeYouTubeAPI(urlSource, videoId);
};
// API not ready, add the creation function to the queue
youtubePlayerAPIQueue.push(createPlayer);
if (!isYouTubeApiLoaded) {
// Load the YouTube iframe API script if it hasn't been loaded yet
window.onYouTubeIframeAPIReady = () => {
isYouTubeApiLoaded = true;
while (youtubePlayerAPIQueue.length) {
youtubePlayerAPIQueue.shift()();
}
};
// Load the YouTube iframe API script
const script = document.createElement("script");
script.src = "https://www.youtube.com/iframe_api";
script.async = true;
document.body.appendChild(script);
const script = document.createElement("script");
script.src = "https://www.youtube.com/iframe_api";
script.async = true;
document.body.appendChild(script);
}
}

@@ -273,4 +107,4 @@

return () => {
if (urlSource) {
urlSource.innerHTML = ""; // Remove the YouTube player iframe
if (playerDiv) {
playerDiv.innerHTML = ""; // Remove the YouTube player iframe
}

@@ -281,54 +115,16 @@ };

// Function to initialize the YouTube API
const initializeYouTubeAPI = (urlSource, videoId) => {
const emWidth = urlSource.getAttribute("data-mirax-embed-width");
const emHeight = urlSource.getAttribute("data-mirax-embed-height");
const emFS = urlSource.getAttribute("data-mirax-embed-fullscreen");
const emControls = urlSource.getAttribute("data-mirax-embed-controls");
const emAutoplay = urlSource.getAttribute("data-mirax-embed-autoplay");
const emLoop = urlSource.getAttribute("data-mirax-embed-loop");
const fullscreenValue = emFS === "false" ? 0 : 1;
const controlsValue = emControls === "false" ? 0 : 1;
const AutoplayValue = emAutoplay === "false" ? 0 : 1;
const AutomutedValue = emAutoplay === "false" ? 0 : 1;
const LoopValue = emLoop === "false" ? 0 : 1;
const inputEmbedClip = document.createElement('style');
document.head.appendChild(inputEmbedClip);
const inputEmbedClipStyle = `
.class-mirax-embed {
position: relative;
width: 100%;
max-width: ${emWidth}px;
height:${emHeight}px;
margin: 0 auto;
overflow: hidden;
}
.class-mirax-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle));
if (urlSource) {
new window.YT.Player(urlSource, {
const initializeYouTubeAPI = (playerDiv, videoId, video) => {
if (playerDiv) {
new window.YT.Player(playerDiv, {
videoId: videoId,
width: emWidth, // Use the e-width attribute
height: emHeight, // Use the e-height attribute
width: video.width,
height: video.height,
playerVars: {
fs: fullscreenValue,
controls: controlsValue, // 0 or 1
fs: video.fullscreen ? 1 : 0,
controls: video.controls ? 1 : 0,
cc_load_policy: 1,
autoplay: AutoplayValue,
mute: AutomutedValue,
loop: LoopValue
}
autoplay: video.autoplay ? 1 : 0,
mute: video.autoplay ? 1 : video.muted,
loop: video.loop ? 1 : 0,
},
});

@@ -338,18 +134,66 @@ }

// Initialize the queue for YouTube API callbacks
let youtubePlayerAPIQueue = [];
// Function to extract Vimeo video ID from a URL
const extractVimeoVideoId = (url) => {
const videoIdMatch = url.match(/\/(\d+)/);
if (videoIdMatch && videoIdMatch[1]) {
return videoIdMatch[1];
} else {
console.error("Invalid Vimeo video URL");
return "";
}
};
// Function to embed a Vimeo video
const embedVimeo = (video) => {
const videoId = extractVimeoVideoId(video.videoUrl);
const playerDiv = document.createElement("div");
// Generate a dynamic class name like "video-1", "video-2", etc.
playerDiv.className = `video-${videoCount}`;
// Increment the video count for the next video
videoCount++;
playerDiv.dataset.eVideoId = videoId;
// Append the player div to the document body
document.body.appendChild(playerDiv);
const script = document.createElement("script");
script.src = "https://player.vimeo.com/api/player.js";
script.async = true;
script.onload = () => {
const vimeoPlayer = new window.Vimeo.Player(playerDiv, {
id: videoId,
width: video.width,
height: video.height,
controls: video.controls,
autoplay: video.autoplay,
muted: false,
loop: video.loop,
});
vimeoPlayer.ready().then(() => {
// You can use player methods here as needed
});
};
document.body.appendChild(script);
return () => {
if (playerDiv) {
playerDiv.innerHTML = "";
}
document.body.removeChild(script);
};
};

@@ -362,115 +206,65 @@

// Function to extract Vimeo video ID from a URL
const extractVimeoVideoId = (url) => {
const videoIdMatch = url.match(/\/(\d+)/);
if (videoIdMatch && videoIdMatch[1]) {
return videoIdMatch[1];
} else {
console.error("Invalid Vimeo video URL");
return "";
}
};
// Function to embed a Vimeo video
const embedVimeo = (urlSource) => {
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
const emWidth = urlSource.getAttribute("data-mirax-embed-width");
const emHeight = urlSource.getAttribute("data-mirax-embed-height");
const emControls = urlSource.getAttribute("data-mirax-embed-controls");
const emAutoplay = urlSource.getAttribute("data-mirax-embed-autoplay");
const emLoop = urlSource.getAttribute("data-mirax-embed-loop");
const controlsValue = emControls === "false" ? 0 : 1;
const AutoplayValue = emAutoplay === "false" ? false : true;
const LoopValue = emLoop === "false" ? false : true;
const embedTiktok = async (video) => {
try {
const videoUrl = video.videoUrl;
// Fetch oEmbed data from TikTok's API
const response = await fetch(`https://www.tiktok.com/oembed?url=${encodeURIComponent(videoUrl)}`);
if (!response.ok) {
throw new Error(`Failed to fetch TikTok oEmbed data: ${response.statusText}`);
}
const inputEmbedClip = document.createElement('style');
document.head.appendChild(inputEmbedClip);
const inputEmbedClipStyle = `
.class-mirax-embed {
position: relative;
width: 100%;
max-width: ${emWidth}px;
height:${emHeight}px;
margin: 0 auto;
overflow: hidden;
const data = await response.json();
if (data.html) {
data.html = data.html.replace(/<script[^>]*>.*<\/script>/gi, "");
}
.class-mirax-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`;
inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle));
const videoContainer = document.createElement("div");
videoContainer.innerHTML = data.html;
const videoId = extractVimeoVideoId(videoUrl);
if (document.body) {
document.body.appendChild(videoContainer);
// Create a script element to load the Vimeo Player API
const script = document.createElement("script");
script.src = "https://player.vimeo.com/api/player.js";
script.async = true;
// Dynamically load the TikTok embed script
const miraxBinderTikTok = document.createElement("script");
miraxBinderTikTok.src = "https://www.tiktok.com/embed.js";
document.body.appendChild(miraxBinderTikTok);
}
} catch (error) {
console.error(error);
}
};
// Callback when the Vimeo Player API script is loaded
script.onload = () => {
const vimeoPlayer = new window.Vimeo.Player(urlSource, {
id: videoId,
width: emWidth, // Use the e-width attribute
height: emHeight, // Use the e-height attribute
controls: controlsValue,
autolay: AutoplayValue,
muted: false,
loop: LoopValue,
responsive: true
});
vimeoPlayer.ready().then(() => {
// You can use player methods here as needed
});
};
document.body.appendChild(script);
// Function to clean up the player
return () => {
if (urlSource) {
urlSource.innerHTML = ""; // Remove the Vimeo player iframe
}
document.body.removeChild(script);
};
};
// Function to embed either YouTube or Vimeo or TikTok or Dailymotion video based on the URL
const miraxEmbed = (urlSource) => {
const videoUrl = urlSource.getAttribute("data-mirax-embed-url");
if (videoUrl.includes("vimeo.com")) {
embedVimeo(urlSource);
} else if (videoUrl.includes("youtube.com") || videoUrl.includes("youtu.be")) {
embedYouTube(urlSource);
} else if (videoUrl.includes("tiktok.com") || videoUrl.includes("tiktok")) {
embedTiktok(urlSource);
} else if (videoUrl.includes("dailymotion.com") || videoUrl.includes("dailymotion")) {
embedDailymotion(urlSource);
} else if (videoUrl.includes("twitter.com")) {
embedTwitter(urlSource);
}
else {
const embedVideos = (video) => {
if (video.videoUrl.includes("vimeo.com")) {
embedVimeo(video);
} else if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) {
embedYouTube(video);
} else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) {
embedTiktok(video);
} else {
throw new Error("Invalid video URL");

@@ -481,3 +275,3 @@ }

export default miraxEmbed;
export default embed;

@@ -484,0 +278,0 @@ /* # Mirax Player core license

3

index.js
//index.js - This is your package's entry point
export { default as miraxPlayer } from './dist/MiraxPlayer';
export { default as miraxEmbed } from './dist/miraxEmbedder';
export { default as embed } from './dist/miraxEmbedder';

@@ -6,0 +5,0 @@

31

mirax-player.d.ts

@@ -6,15 +6,24 @@ // mirax-player.d.ts

// Type for the VideoEmbed function
type VideoEmbed = (
urlSource: HTMLDivElement | null
) => void;
// Type for the VideoPlayer function
type VideoPlayer = (
videoClip: HTMLVideoElement
) => void;
// Type for the Video object
type Video = {
width?: number;
height?: number;
autoplay?: boolean;
fullscreen?: boolean;
controls?: boolean;
loop?: boolean;
videoUrl: string;
};
// Export the VideoEmbed and VideoPlayer types
export const miraxEmbed: VideoEmbed;
export const miraxPlayer: VideoPlayer;
// Type for the VideoEmbed function
type VideoEmbed = (
videos: Video[],
mutation: { current: Set<string> | null }
) => void;
// Export the VideoEmbed type
export const embed: VideoEmbed;
}

4

package.json
{
"name": "mirax-player",
"version": "5.0.0",
"description": "Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion.",
"version": "6.0.0-alpha.1",
"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",
"main": "index.js",

@@ -6,0 +6,0 @@ "types": "mirax-player.d.ts",

487

README.md

@@ -8,13 +8,10 @@ <p align="center">

# Mirax Player
[![Npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=npm&color=brightgreen)](https://www.npmjs.com/package/mirax-player)
![Build Status](https://img.shields.io/badge/build-passing-brightgreen?style=flat-square)
![Downloads](https://img.shields.io/npm/dt/mirax-player.svg?style=flat-square&label=downloads&color=brightgreen)
[![License](https://img.shields.io/npm/l/mirax-player.svg?style=flat-square&label=license&color=green)](https://github.com/demjhonsilver/mirax-player/blob/main/LICENSE.md)
[![Npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=NPM&color=blue)](https://www.npmjs.com/package/mirax-player)
![Downloads](https://img.shields.io/npm/dt/mirax-player.svg?style=flat-square&label=DOWNLOADS&color=brightgreen)
[![License](https://img.shields.io/npm/l/mirax-player.svg?style=flat-square&label=LICENSE&color=green)](https://github.com/demjhonsilver/mirax-player/blob/main/LICENSE.md)
</div>
<p align="center">
<img src="https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme1.png"/>
</p>
---------------------

@@ -30,5 +27,3 @@

- [Embed Video](#embed-video)
- [Video Player](#video-player)
- [CSS Player](#css-player)
- [Colors](#colors)
- [Embed Css](#embed-css)
- [License](#license)

@@ -39,3 +34,3 @@ - [Author](#author)

Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like 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.
Mirax Player is an embed player for React, Vue, Angular, and Svelte that can embed videos from platforms like 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.

@@ -53,29 +48,20 @@

## Release-notes
Version 6
Major changes:
- Updates the UI video player with backward & forward buttons.
- Mirax embed officially supports Twitter and Dailymotion videos.
- Mirax tags have been replaced with new readability terms, and some are optional.
- Mirax video player has been deprecated.
- Mirax embed is now easier to use.
- Mirax player can embed multiple videos.
Minor changes:
Reminder:
- Minimize the parameters.
- This is an Alpha test (experimental) aimed at simplifying code syntax.
Patch changes:
- Progress bar move to the top
-------
## Features
- 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, Twitter, Vimeo and Dailymotion.
- Capable of playing videos (Portrait or Landscape).
- Customizable color themes.
- Supports PIP (Picture-in-Picture).
- Capable of embedding videos from platforms like TikTok, YouTube, YouTube Shorts, and Vimeo.
- Supports playing videos in both portrait and landscape orientations.
-------------

@@ -97,4 +83,2 @@ ## Installation

![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge&logo=TikTok&logoColor=white) | TikTok | oEmbed API | https://developers.tiktok.com/doc/embed-videos/
![Dailymotion](https://a11ybadges.com/badge?logo=dailymotion) | Dailymotion | oEmbed API | https://developers.dailymotion.com/news/player-api/embed-dailymotion-video-oembed/
![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white) | Twitter / X | JavaScript API | https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites
--------

@@ -104,12 +88,11 @@

Mirax embed tags | Functionality | Type | Required |
Mirax embed props | Functionality | Type | Required |
------ | -------- | -------- | ----------
`class-mirax-embed` |responsiveness | any | yes
`data-mirax-embed-width` | dynamic width | integer | yes
`data-mirax-embed-height` | dynamic height | integer | yes
`data-mirax-embed-fullscreen` | enable fullscreen | boolean | optional (true false)
`data-mirax-embed-controls` | enable controllers | boolean | optional (true false )
`data-mirax-embed-autoplay` | enable autoplay | boolean | optional (true false)
`data-mirax-embed-loop` | enable loop | boolean | optional (true false)
`data-mirax-embed-url` | video address, url/links | any | yes
`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
---------

@@ -119,314 +102,222 @@ ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

```html
src/react/TypeScriptPlayer.md
src/react/TypeScriptEmbed.md
src/vue/TypeScriptPlayer.md
src/vue/TypeScriptEmbed.md
src/svelte/TypeScriptPlayer.md
src/svelte/TypeScriptEmbed.md
```
# React embed
```js
import React, { useEffect, useRef } from "react";
import { miraxEmbed } from 'mirax-player';
const ExampleComponent = () => {
const embedVideo = useRef(null);
useEffect(() => {
miraxEmbed(embedVideo.current);
});
return (
<div className="class-mirax-embed"
ref={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
);
};
export default ExampleComponent;
```
# Vue embed
```js
<template>
<div class="class-mirax-embed">
<div ref="embedVideo"
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
</template>
## Embed-css
<script>
import { ref, onMounted } from "vue";
import { miraxEmbed } from 'mirax-player';
You can set many class names based on the total embed videos :
ex.
export default {
setup() {
const embedVideo = ref(null);
onMounted(() => {
if (embedVideo.value) {
miraxEmbed(embedVideo.value);
}
});
return {
embedVideo
};
`.video-3`, `.video-4`, `.video-5`.
-----------
```css
.video-1 {
display: inline-flex;
border: 2px solid red;
width: 100%;
max-width: 640px;
float: left;
}
};
</script>
```
# Angular embed
```ts
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 {
miraxEmbed(this.embedVideo.nativeElement);
}
.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;
}
```
example.component.html
-------------
```html
<div class="class-mirax-embed">
<div #embedVideo
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
```
# Svelte embed
------------
You can embed one or more videos in any URL.
# React embed
```js
<script>
import { onMount } from 'svelte';
import { miraxEmbed } from 'mirax-player';
import React, { useEffect, useRef } from "react";
import { embed } from 'mirax-player';
let embedVideo;
onMount(() => {
miraxEmbed(embedVideo);
});
</script>
const ExampleComponent = () => {
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
},
{
videoUrl: "https://www.tiktok.com/@scout2015/video/6718335390845095173",
},
<div class="class-mirax-embed">
<div bind:this={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
```
-----------------
];
## Video-player
Mirax player tags | Functionality |Type | Required |
------ | -------- | ----------- | ----------
`class-mirax-player` | responsiveness | any| yes
`data-mirax-player-width` | dynamic width | integer | yes
`data-mirax-player-float` | dynamic alignment | string |optional
`data-mirax-player-theme` | player color | any | optional
`data-mirax-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` | Progress bar | backward for 10 sec.
press `right arrow key` | Progress bar | forward for 10 sec.
-------------
- location of videos stored:
public/clip.mp4 from your frameworks
assets/clip.mp4 angular
https://example.com/video/clip.mp4
----------------------
# React video player
```js
import React, { useEffect, useRef } from "react";
import { miraxPlayer } from 'mirax-player';
const ExampleComponent = () => {
const videoPlayer = useRef(null);
const mutation = useRef(new Set());
useEffect(() => {
if (videoPlayer.current) {
miraxPlayer(videoPlayer.current);
}
embed(videos, mutation);
});
return (
<div className="class-mirax-player">
<video ref={videoPlayer}
className="mirax-player"
data-mirax-player-width="800"
src="clip.mp4">
</video>
</div>
<></>
);
};
export default ExampleComponent;
```
# Vue video player
# Vue embed
```js
<template>
<div class="class-mirax-player">
<video ref="videoPlayer"
class="mirax-player"
data-mirax-player-width="800"
src="clip.mp4">
</video>
</div>
<div></div>
</template>
<script>
import { ref, onMounted } from "vue";
import { miraxPlayer } from 'mirax-player';
import { ref, onMounted } from 'vue';
import { embed } from 'mirax-player';
export default {
name: 'ExampleComponent',
setup() {
const videoPlayer = ref(null);
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
const mutation = ref(new Set());
onMounted(() => {
if (videoPlayer.value) {
miraxPlayer(videoPlayer.value);
}
embed(videos, mutation);
});
return {
videoPlayer
};
}
return {};
},
};
</script>
```
# Angular video player
---------
example.component.ts
-----------
# Angular embed
```ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { miraxPlayer } from 'mirax-player';
import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core';
import { embed } from 'mirax-player';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
template: '<div></div>',
styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements AfterViewInit {
@ViewChild('videoPlayer', { static: true }) videoPlayer!: ElementRef<HTMLVideoElement>;
ngAfterViewInit(): void {
this.initializemiraxPlayer();
export class ExampleComponent implements OnInit, AfterViewInit {
constructor(private elementRef: ElementRef) {}
ngOnInit() {}
ngAfterViewInit() {
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
const mutation = new Set();
embed(videos, mutation, { container: this.elementRef.nativeElement });
}
initializemiraxPlayer() {
if (this.videoPlayer.nativeElement) {
miraxPlayer(this.videoPlayer.nativeElement);
}
}
}
```
example.component.html
-------------
```html
<div class="class-mirax-player">
<video #videoPlayer
class="mirax-player"
data-mirax-player-width="800"
src="assets/clip.mp4">
</video>
</div>
```
# Svelte video player
```js
# Svelte embed
```js
<script>
import { onMount } from 'svelte';
import { miraxPlayer } from 'mirax-player';
let videoPlayer;
let mutation = new Set();
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
onMount(() => {
if (videoPlayer) {
miraxPlayer(videoPlayer);
}
import('mirax-player').then((module) => {
const { embed } = module;
embed(videos, mutation);
});
});
</script>
<div class="class-mirax-player">
<video bind:this={videoPlayer} class="mirax-player"
data-mirax-player-width="800"
src="clip.mp4">
<track kind="captions" src="" label="English" default>
</video>
</div>
<div></div>
```
## CSS-player
-----------------
- Left
```js
data-mirax-player-float="left"
```
- Center
```js
data-mirax-player-float=""
//or
data-mirax-player-float="center"
```
- Right
```js
data-mirax-player-float="right"
```
---------------------------------------------------
-----
Examples:
---------
```js
data-mirax-player-theme="rgba(250, 149, 35, 0.9)"
data-mirax-player-bar="rgba(17, 117, 59, 0.9)"
```
```js
data-mirax-player-theme="rgb(0,0,0)"
data-mirax-player-bar="rgb(255, 255, 255)"
```
```js
data-mirax-player-theme="#000000"
data-mirax-player-bar="#00ff00"
```
```js
data-mirax-player-theme="black"
data-mirax-player-bar="red"
```
If you want pure transparent:
---------
```js
data-mirax-player-theme = "rgba(0, 0, 0, 0)";
```
## License
## Colors
[MIT](http://www.opensource.org/licenses/MIT)
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
----------------------------------------------------
- This library package is FREE for commercial or personal use. ❤️
## License
[MIT](http://www.opensource.org/licenses/MIT)
----------------------------------------------------

@@ -436,3 +327,3 @@ ## Author

Demjhon Silver
- This library package is FREE for commercial or personal use. ❤️
- Thank you for your support. 😃

45

src/angular/TypescriptEmbed.md
```ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { miraxEmbed } from 'mirax-player';
import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core';
import { embed } from 'mirax-player';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
template: '<div></div>',
styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
@ViewChild('embedVideo', { static: true }) embedVideo!: ElementRef;
constructor() { }
ngOnInit(): void {
miraxEmbed(this.embedVideo.nativeElement);
export class ExampleComponent implements OnInit, AfterViewInit {
constructor(private elementRef: ElementRef) {}
ngOnInit() {}
ngAfterViewInit() {
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
const mutation = new Set();
embed(videos, mutation, { container: this.elementRef.nativeElement });
}
}
```

38

src/react/JavascriptEmbed.md
```js
import React, { useEffect, useRef } from "react";
import { miraxEmbed } from 'mirax-player';
import { embed } from 'mirax-player';
const ExampleComponent = () => {
const embedVideo = useRef(null);
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
},
{
videoUrl: "https://www.tiktok.com/@scout2015/video/6718335390845095173",
},
];
const mutation = useRef(new Set());
useEffect(() => {
miraxEmbed(embedVideo.current);
embed(videos, mutation);
});
return (
<div className="class-mirax-embed"
ref={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
<></>
);
};
export default ExampleComponent;
```

23

src/react/TypescriptEmbed.md
```ts
import React, { useEffect, useRef, RefObject } from "react";
import { miraxEmbed } from 'mirax-player';
const ExampleComponent: React.FC = () => {
const embedVideo: RefObject<HTMLDivElement> = useRef(null);
useEffect(() => {
if (embedVideo.current) {
miraxEmbed(embedVideo.current);
}
}, []);
return (
<div
className="class-mirax-embed"
ref={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569"
></div>
);
};
export default ExampleComponent;
```

38

src/svelte/JavascriptEmbed.md
```js
<script>
import { onMount } from 'svelte';
import { miraxEmbed } from 'mirax-player';
let embedVideo;
let mutation = new Set();
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
onMount(() => {
miraxEmbed(embedVideo);
import('mirax-player').then((module) => {
const { embed } = module;
embed(videos, mutation);
});
});
</script>
<div class="class-mirax-embed">
<div bind:this={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
<div></div>
```

19

src/svelte/TypescriptEmbed.md
```ts
<script lang="ts">
import { onMount } from 'svelte';
import { miraxEmbed } from 'mirax-player';
let embedVideo: HTMLDivElement | undefined;
onMount(() => {
if (embedVideo) {
miraxEmbed(embedVideo);
}
});
</script>
<div class="class-mirax-embed">
<div bind:this={embedVideo}
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
```

48

src/vue/JavascriptEmbed.md
```js
<template>
<div class="class-mirax-embed">
<div ref="embedVideo"
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
<div></div>
</template>
<script>
import { ref, onMounted } from "vue";
import { miraxEmbed } from 'mirax-player';
import { ref, onMounted } from 'vue';
import { embed } from 'mirax-player';
export default {
name: 'ExampleComponent',
setup() {
const embedVideo = ref(null);
const videos = [
{
width: 640,
height: 310,
autoplay: false,
fullscreen: true,
controls: true,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
width: 640,
height: 310,
autoplay: true,
fullscreen: true,
controls: false,
videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
},
{
videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
},
];
const mutation = ref(new Set());
onMounted(() => {
if (embedVideo.value) {
miraxEmbed(embedVideo.value);
}
embed(videos, mutation);
});
return {
embedVideo
};
}
return {};
},
};
</script>
```

21

src/vue/TypescriptEmbed.md
```ts
<template>
<div class="class-mirax-embed">
<div ref="embedVideo"
data-mirax-embed-width="640"
data-mirax-embed-height="360"
data-mirax-embed-url="https://vimeo.com/217499569">
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { miraxEmbed } from 'mirax-player';
const embedVideo = ref<HTMLDivElement | null>(null);
onMounted(() => {
if (embedVideo.value) {
miraxEmbed(embedVideo.value);
}
});
</script>
```
dist/MiraxPlayer.js
dist/miraxplayerUI.js
src/angular/ExampleEmbed.md
src/angular/ExamplePlayer.md
src/angular/TypescriptPlayer.md
src/react/JavascriptPlayer.md
src/react/TypescriptPlayer.md
src/svelte/JavascriptPlayer.md
src/svelte/TypescriptPlayer.md
src/vue/JavascriptPlayer.md
src/vue/TypescriptPlayer.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc