muabe-miv2-player-embed

Web component wrapper for the Muabe MIV2 web player.

Install

npm install muabe-miv2-player-embed

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-embed';

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-embed';

configureMiv2Player({
  playerBaseUrl: 'https://player.example.com/',
  repeat: false,
  muted: true,
  videoCache: 'sw',
});

Or per element:

<miv2-player
  src="https://cdn.example.com/scenes/window_cleaning.miv2"
  player-base-url="https://player.example.com/"
  repeat="false"
  muted="true"
  video-cache="sw"
  aspect-ratio="9 / 16"
></miv2-player>

repeat controls replay after completion. If omitted, the player uses the .miv2 bundle's own repeat setting. muted and mute are aliases for the main scene video's initial mute state. video-cache="sw" enables the service worker backed video cache path. If omitted, the player keeps the default blob preload flow.

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-embed';

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

Events

The web component dispatches a DOM event when the embedded player reaches final scene completion:

const player = document.querySelector('miv2-player');

player.addEventListener('miv2:done', (event) => {
  console.log(event.detail.actorName);
  console.log(event.detail.repeatPlayback);
});

An alias event named miv2-last-actor-done is also emitted with the same payload.

Notes

• The remote .miv2 URL must be reachable from the browser and allow CORS.
• Hosted player URLs now treat ?src=... as bare video-only mode by default.
• Add debug=1 to restore the full hosted debug UI, or embed=0 to force the legacy non-embed view.
• event.detail for completion events contains sceneParam, actorName, and repeatPlayback.