{"id":19645519,"url":"https://github.com/demjhonsilver/mirax-player","last_synced_at":"2025-04-28T14:32:46.135Z","repository":{"id":190321348,"uuid":"682372296","full_name":"demjhonsilver/mirax-player","owner":"demjhonsilver","description":"Mirax Player is a free and open source video player for React, Vue, Angular, and Svelte.","archived":false,"fork":false,"pushed_at":"2024-09-08T12:27:45.000Z","size":20025,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-11-03T09:45:55.940Z","etag":null,"topics":["angular","javascipt","javascript-framework","javascript-library","react","svelte","video-player-application","video-player-library","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/mirax-player","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/demjhonsilver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-08-24T03:09:45.000Z","updated_at":"2024-09-08T12:25:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"33d75e11-4a58-4cd2-b318-fe9cc014edae","html_url":"https://github.com/demjhonsilver/mirax-player","commit_stats":null,"previous_names":["demjhons/mirax-player"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fmirax-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fmirax-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fmirax-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/demjhonsilver%2Fmirax-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/demjhonsilver","download_url":"https://codeload.github.com/demjhonsilver/mirax-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224121236,"owners_count":17259231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","javascipt","javascript-framework","javascript-library","react","svelte","video-player-application","video-player-library","vue"],"created_at":"2024-11-11T14:34:17.197Z","updated_at":"2024-11-11T14:34:17.986Z","avatar_url":"https://github.com/demjhonsilver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/logo.png\" alt=\"Logo\" width=\"70\" height=\"70\"/\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n\r\n# Mirax Player \r\n\r\n[![npm version](https://img.shields.io/npm/v/mirax-player.svg?logo=npm\u0026style=flat-square\u0026label=Latest\u0026color=blue)](https://www.npmjs.com/package/mirax-player)\r\n![Written](https://img.shields.io/badge/JavaScript-blue?logo=javascript\u0026label=Written\u0026style=flat-square\u0026color=FDDA0D)\r\n![Downloads](https://img.shields.io/npm/dt/mirax-player.svg?\u0026style=flat-square\u0026label=Downloads\u0026color=orange)\r\n[![License](https://img.shields.io/npm/l/mirax-player.svg?style=flat-square\u0026label=License\u0026color=green)](https://github.com/demjhonsilver/mirax-player/blob/main/LICENSE.md)\r\n\r\n\r\n\u003c/div\u003e\r\n\r\n\r\n\r\n\r\n\r\n\u003cp align=\"center\"\u003e\r\n\r\n  \u003cimg src=\"https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme1.png\"/\u003e\r\n\r\n\u003c/p\u003e\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n---------------------\r\n\r\n\r\n\r\n## Table of Contents\r\n\r\n- [Description](#description)\r\n- [Release Notes](#release-notes)\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [TypeScript](#typescript)\r\n- [React](#react)\r\n- [Vue](#vue)\r\n- [Angular](#angular)\r\n- [Svelte](#svelte)\r\n- [Video Player](#video-player)\r\n- [CSS Player](#css-player)\r\n- [Colors](#colors)\r\n- [License](#license)\r\n- [Author](#author)\r\n\r\n## Description\r\n\r\nMirax Player is a free video player for React, Vue, Angular, and Svelte.\r\n\r\nFrameworks / Libraries | Tested versions\r\n------ | -------- | \r\n ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) | 18 \u0026 above\r\n![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=%234FC08D)  | 3 \u0026 above\r\n![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge\u0026logo=angular\u0026logoColor=white)  | 16 \u0026 above\r\n![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge\u0026logo=svelte\u0026logoColor=white) | 3 \u0026 above\r\n\r\n\r\n\r\n-----\r\n\r\n\r\n\r\n## Release-notes\r\n\r\nVersion 7.0.0\r\n\r\nMajor Changes:\r\n\r\n  - The Mirax video player remains the focus as the media player service, although you can still change the color.\r\n  - The buttons for forward, backward, and play have been changed into simple shapes.\r\n  - The player button moves to the left side.\r\n  - The embed feature has been removed and transferred to another package named `Embedrax`.\r\n   [Embedrax - embed videos](https://github.com/demjhonsilver/embedrax)\r\n\r\nMinor Changes:\r\n\r\n  v7.1.0\r\n  - Remap the spacebar to function as the play button.\r\n\r\nPatch Changes:\r\n\r\n  v7.0.1\r\n  - Just adjusted the arrow icons to be more responsive.\r\n\r\n  v7.1.1\r\n  - The forward and backward buttons decrease the size.\r\n  - The progress bar has a translucent line.\r\n\r\n## Features\r\n\r\n\r\n- Easy to use and responsive.\r\n- Can change the color of the video player.\r\n- The width can be set to a minimum of 370 and a maximum of 1038.\r\n\r\n\r\n\r\n\r\n\r\n\r\n-------------\r\n\r\n## Installation\r\n\r\n\r\n\r\nTo install the Mirax Player, you can use the following npm command:\r\n\r\n\r\n\r\n```bash\r\n\r\nnpm install mirax-player\r\n\r\n```\r\n\r\n## TypeScript\r\n\r\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\r\n\r\n\r\n- located at repository files\r\n\r\n\r\n```html\r\n\r\nmirax-player/\r\n|-- src/\r\n|   |-- angular/\r\n|   |-- react/TypeScriptPlayer.md\r\n|   |-- svelte/TypeScriptPlayer.md\r\n|   |-- vue/TypeScriptPlayer.md\r\n```\r\n--------\r\n\r\nReminder:\r\n\r\n- Don't forget to restart your server.\r\n\r\n------------\r\n\r\n\r\n## Video-player\r\n\r\nPlayer Attributes |   Functionality |Type | Required |\r\n------ | -------- |  ----------- | ----------\r\n`player-selector` | responsiveness | any| yes\r\n`data-player-width` | dynamic width | number | yes\r\n`data-player-float`   | dynamic alignment | string |optional\r\n`data-player-theme` | player color |  any | optional\r\n`data-player-bar`  | progress bar color | any | optional\r\n\r\n-------\r\n\r\n\r\nKeyboard shortcuts| Functions | Description \r\n---- |  ---------------------- | -----------\r\npress `space bar` | Play \u0026 Pause |The video will play or pause \r\npress `alt+p` | PiP | Picture in Picture screen \r\npress `left arrow key` | rewind clip | backward for 10 sec. \r\npress `right arrow key` | advance clip | forward for 10 sec.\r\n\r\n-------------\r\n- location of videos stored: \r\n\r\n    public/clip.mp4 from your frameworks\r\n\r\n    assets/clip.mp4 -Angular\r\n\r\n    example.com/video/clip.mp4 (url)\r\n\r\n----------------------\r\n\r\n\r\n# React\r\n```js\r\nimport { useEffect, useRef } from \"react\";\r\nimport { miraxPlayer } from 'mirax-player';\r\n\r\nexport const ExampleComponent = () =\u003e {\r\n  const playerDiv = useRef(null);\r\n  useEffect(() =\u003e {\r\n      miraxPlayer(playerDiv.current);\r\n  });\r\n  return (\r\n    \u003c\u003e\r\n    \u003cdiv className=\"player-selector\"\u003e\r\n      \u003cvideo className=\"mirax-player\" ref={playerDiv}\r\n        data-player-width=\"1038\"\r\n        src=\"clip.mp4\"\u003e\r\n      \u003c/video\u003e\r\n    \u003c/div\u003e\r\n    \u003c/\u003e\r\n  );\r\n};\r\n```\r\n\r\nor\r\n\r\n\r\n```js\r\nimport { useEffect, useRef } from \"react\";\r\nimport { miraxPlayer } from 'mirax-player';\r\n\r\nconst ExampleComponent = () =\u003e {\r\n  const playerDiv = useRef(null);\r\n  useEffect(() =\u003e {\r\n      miraxPlayer(playerDiv.current);\r\n  });\r\n  return (\r\n    \u003c\u003e\r\n    \u003cdiv className=\"player-selector\"\u003e\r\n      \u003cvideo className=\"mirax-player\" ref={playerDiv}\r\n        data-player-width=\"1038\"\r\n        src=\"clip.mp4\"\u003e\r\n      \u003c/video\u003e\r\n    \u003c/div\u003e\r\n    \u003c/\u003e\r\n  );\r\n};\r\n\r\nexport default ExampleComponent\r\n```\r\n\r\n\r\n\r\n\r\n# Vue\r\n```js\r\n\u003ctemplate\u003e\r\n  \u003cdiv class=\"player-selector\"\u003e\r\n    \u003cvideo ref=\"playerDiv\"\r\n      class=\"mirax-player\"\r\n      data-player-width=\"1038\"\r\n      src=\"clip.mp4\"\u003e\r\n    \u003c/video\u003e\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport { ref, onMounted } from \"vue\";\r\nimport { miraxPlayer } from 'mirax-player';\r\n\r\nexport default {\r\n  setup() {\r\n    const playerDiv = ref(null);\r\n    onMounted(() =\u003e {\r\n        miraxPlayer(playerDiv.value);\r\n    });\r\n    return {\r\n      playerDiv\r\n    };\r\n  }\r\n};\r\n\u003c/script\u003e\r\n```\r\n# Angular\r\n---------\r\nexample.component.ts\r\n-----------\r\n```ts\r\nimport { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';\r\nimport { miraxPlayer } from 'mirax-player';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  templateUrl: './example.component.html',\r\n  styleUrls: ['./example.component.css']\r\n})\r\nexport class ExampleComponent implements AfterViewInit {\r\n  @ViewChild('playerDiv', { static: true }) playerDiv!: ElementRef\u003cHTMLVideoElement\u003e;\r\n  ngAfterViewInit(): void {\r\n    this.initializemiraxPlayer();\r\n  }\r\n  initializemiraxPlayer() {\r\n      miraxPlayer(this.playerDiv.nativeElement);\r\n  }\r\n}\r\n```\r\n\r\nexample.component.html\r\n\r\n-------------\r\n```html\r\n  \u003cdiv class=\"player-selector\"\u003e\r\n    \u003cvideo #playerDiv\r\n      class=\"mirax-player\"\r\n      data-player-width=\"1038\"\r\n      src=\"assets/clip.mp4\"\u003e\r\n    \u003c/video\u003e\r\n  \u003c/div\u003e\r\n```\r\n# Svelte\r\n```js\r\n\u003cscript\u003e\r\n  import { onMount } from 'svelte';\r\n  import { miraxPlayer } from 'mirax-player';\r\n\r\n  let playerDiv;\r\n  onMount(() =\u003e {\r\n      miraxPlayer(playerDiv);\r\n  });\r\n\u003c/script\u003e\r\n\r\n\u003cdiv class=\"player-selector\"\u003e\r\n  \u003cvideo bind:this={playerDiv} class=\"mirax-player\"\r\n      data-player-width=\"1038\"\r\n      src=\"clip.mp4\"\u003e\r\n    \u003ctrack kind=\"captions\" src=\"\" label=\"English\" default\u003e\r\n  \u003c/video\u003e\r\n\u003c/div\u003e\r\n\r\n```\r\n\r\n## CSS-player\r\n\r\nexample:\r\n\r\n```js\r\n      \u003cvideo className=\"mirax-player\" ref={playerDiv}\r\n        data-player-width=\"800\"\r\n        data-player-theme=\"rgba(250, 149, 35, 0.8)\" // it's okay if it's not include\r\n        data-player-bar=\"rgba(17, 117, 59, 0.9)\" // it's okay if it's not include\r\n        src=\"clip.mp4\"\u003e\r\n      \u003c/video\u003e\r\n```\r\n## To choose from many colors:\r\n\r\nyou can simply search on Google. Just type:\r\n\r\n\r\n`html color hex codes`\r\n\r\n`html color hex palette`\r\n\r\nor \r\n\r\n`html color rgba codes`\r\n\r\n`html color rgba palette`\r\n\r\nand copy it.\r\n\r\n- Left\r\n```js\r\n      data-player-float=\"left\"\r\n```\r\n- Center\r\n```js\r\n      data-player-float=\"\" // center is default\r\n      //or\r\n      data-player-float=\"center\"\r\n```\r\n- Right\r\n```js\r\n      data-player-float=\"right\"\r\n```\r\n\r\n-----\r\nExamples:\r\n---------\r\n```js\r\n      data-player-theme=\"rgba(250, 149, 35, 0.9)\"\r\n      data-player-bar=\"rgba(17, 117, 59, 0.9)\"\r\n```\r\n```js\r\n      data-player-theme=\"rgb(0,0,0)\"\r\n      data-player-bar=\"rgb(255, 255, 255)\"\r\n```\r\n```js\r\n      data-player-theme=\"#000000\"\r\n      data-player-bar=\"#00ff00\"\r\n```\r\n```js\r\n      data-player-theme=\"black\"\r\n      data-player-bar=\"red\"\r\n```\r\nIf you want pure transparent:\r\n---------\r\n ```js\r\n      data-player-theme = \"rgba(0, 0, 0, 0)\"\r\n```\r\n\r\n## Colors\r\n\r\nColor Types | Color syntax | Example | Opacity Range |  Appearance\r\n---------- |  --------- | ---------------- | -------------------- | ---------------\r\n`RGBA` | rgba() | rgba(255,0,0, 0.5) | `0.1 to 0.9`  or  `0 and 1` | Red half transparency\r\n`RGB`  |rgb() | rgb(255, 0, 0) | `none` | Red\r\n`HEX` | #6digits | #ff0000| `none` | Red\r\n`COLORNAME` | colorname | red | `none` | Red\r\n----------------------------------------------------\r\n\r\n\r\n## License\r\n\r\n[MIT](http://www.opensource.org/licenses/MIT)\r\n\r\n- This library package is FREE for commercial or personal use. ❤️\r\n\r\n----------------------------------------------------\r\n## Author\r\n\r\nDemjhon Silver\r\n\r\n- Thank you for your support. 😃","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemjhonsilver%2Fmirax-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdemjhonsilver%2Fmirax-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdemjhonsilver%2Fmirax-player/lists"}