muabe-miv2-player-hd

Web component wrapper for the Muabe MIV2 web player.

Install

npm install muabe-miv2-player-hd

Basic usage

The package defaults to the hosted player at https://labsplayer.muabe.com/. It also auto-detects the scene aspect ratio and defaults to border-radius: 0, so in most cases you only need to import it once:

import 'muabe-miv2-player-hd';

Add the tag wherever you want the player to render:

<miv2-player src="https://cdn.example.com/scenes/window_cleaning.miv2"></miv2-player>

Custom player host

If you want to override the default host, configure it once:

import { configureMiv2Player } from 'muabe-miv2-player-hd';

configureMiv2Player({
  playerBaseUrl: 'https://player.example.com/',
});

Or per element:

<miv2-player
  src="https://cdn.example.com/scenes/window_cleaning.miv2"
  player-base-url="https://player.example.com/"
  aspect-ratio="9 / 16"
></miv2-player>

Layout options

If you want to force a ratio or reserve space before the player metadata loads:

<miv2-player
  src="https://cdn.example.com/scenes/window_cleaning.miv2"
  min-height="320px"
  border-radius="0"
  aspect-ratio="16 / 9"
></miv2-player>

Programmatic mount

import { mountMiv2Player } from 'muabe-miv2-player-hd';

mountMiv2Player('#product-detail-player', {
  src: 'https://cdn.example.com/scenes/window_cleaning.miv2',
});

Notes

• The remote .miv2 URL must be reachable from the browser and allow CORS.
• The web player reads ?src=...&embed=1 and renders without the local file picker UI.