MagicPlayer

MagicPlayer is a collection of components made to build a flexible, streaming ready media player for video as well as audio playback.

PreviewCode

<template>
  <div class="aspect-[16/9] w-full">
    <magic-player-provider
      id="magic-player-default-demo"
      :options="{
        src: 'https://stream.mux.com/3wVFr42nN3VqIVv01ugl00oSJTzKlhsZ01ep2yKz5vqeZ8.m3u8',
        srcType: 'hls',
      }"
    >
      <magic-player-video />
      <magic-player-poster>
        <magic-player-provider
          id="magic-player-default-demo-poster"
          :options="{
            src: 'https://stream.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/highest.mp4',
            autoplay: true,
            loop: true,
          }"
        >
          <magic-player-video />
          <magic-player-poster>
            <img
              src="https://image.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/thumbnail.png?time=0"
              alt="Poster"
            />
          </magic-player-poster>
        </magic-player-provider>
      </magic-player-poster>
      <magic-player-overlay />
      <magic-player-video-controls>
        <template #popover>
          <magic-player-mux-popover />
        </template>
      </magic-player-video-controls>
    </magic-player-provider>
  </div>
</template>

<style>
@import '@maas/vue-equipment/plugins/MagicPlayer/css/magic-player-video-controls.css';
</style>

Overview

Anatomy

vue

<template>
  <magic-player-provider id="your-player-id" src="your-src.m3u8">
    <magic-player-video />
    <magic-player-poster>
      <!-- your content -->
    </magic-player-poster>
    <magic-player-overlay />
    <magic-player-video-controls>
      <template #seek-popover>
        <magic-player-mux-popover />
      </template>
    </magic-player-video-controls>
  </magic-player-provider>
</template>

<script>
const { playerApi } = useMagicPlayer('your-player-id')
</script>

<style>
@import '@maas/vue-equipment/MagicPlayer/css/magic-player-video-controls.css';
</style>

Overview

Vue

If you are using Vue, import and add MagicPlayerPlugin to your app.

import { createApp } from 'vue'
import { MagicPlayerPlugin } from '@maas/vue-equipment/plugins'

const app = createApp({})

app.use(MagicPlayerPlugin)

Nuxt

The player is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicPlayer to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicPlayer'],
  },
})

Composable

In order to interact with the player from anywhere within your app, we provide a useMagicPlayer composable. Import it directly when needed.

import { useMagicPlayer } from '@maas/vue-equipment/plugins'

const { playerApi } = useMagicPlayer('your-player-id')

function handleClick() {
  playerApi.play()
}

TIP

If you have installed the component as a Nuxt module, the composable will be auto-imported and is automatically available in your Nuxt app.

Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually.

Package
`@nuxt/kit`
`@vueuse/core`
`defu`
`hls.js`

Installation

pnpmnpmyarnbun

pnpm install @nuxt/kit @vueuse/core defu hls.js

npm install @nuxt/kit @vueuse/core defu hls.js

yarn add @nuxt/kit @vueuse/core defu hls.js

bun install @nuxt/kit @vueuse/core defu hls.js

API Reference

MagicPlayerProvider

The MagicPlayerProvider wraps the menu and configures all child components according to the provided options.

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`true`
`options`	`MagicPlayerOptions`	`false`

Options

To customize the player override the necessary options. Any custom options will be merged with the default options.

Option	Type	Default
`src`	`string`	`–`
`mode`	`string`	`video`
`srcType`	`string`	`native`
`preload`	`string`	`metadata`
`autoplay`	`boolean`	`false`
`loop`	`boolean`	`false`
`transition.videoControls`	`string`	`magic-player-video-controls`

CSS Variables

Variable	Default
`--magic-player-provider-height`	`auto`
`--magic-player-provider-aspect-ratio`	`16 / 9`
`--magic-player-provider-background`	`#000`

MagicPlayerOverlay

CSS Variables

Variable	Default
`--magic-player-overlay-background`	`rgba(0, 0, 0, 0.3)`
`--magic-player-overlay-color`	`rgba(255, 255, 255, 1)`
`--magic-player-overlay-transition`	`opacity 300ms ease`
`--magic-player-overlay-button-size`	`2.5rem`

MagicPlayerVideoControls

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`false`
`standalone`	`boolean`	`false`
`transition`	`boolean`	`false`

CSS

Due to their complexity and opinionated nature, we have externalized the styles for this component. Make sure to import them if needed. If not style the component manually.

css

@import '@maas/vue-equipment/MagicPlayer/css/magic-player-video-controls.css';

MagicPlayerMuxPopover

Props

Prop	Type	Required
`playbackId`	`string`	`false`

CSS Variables

Variable	Default
`--magic-player-popover-border-radius`	`0.25rem`

MagicPlayerAudioControls

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`false`

CSS

Due to their complexity and opinionated nature, we have externalized the styles for this component. Make sure to import them if needed. If not style the component manually.

css

@import '@maas/vue-equipment/MagicPlayer/css/magic-player-audio-controls.css';

MagicPlayerDisplayTime

This component is used internally by both the video and audio controls components. You are most likely not going to need it directly, unless you want to implement your own custom controls.

Props

Prop	Type	Required
`type`	`string`	`false`

Examples

Audio Player

PreviewCode

Loveless

0:00

<template>
  <div class="w-full">
    <magic-player-provider
      id="audio-demo-player"
      :options="{ mode: 'audio', src: '/demo/magic-player/loveless.mp3' }"
      class="bg-surface-elevation-high rounded-surface-sm p-2 flex flex-col gap-2"
    >
      <span
        class="w-full block p-4 bg-surface-elevation-base rounded-surface-sm-inset type-surface-callout-md"
      >
        Loveless
      </span>
      <magic-player-audio-controls class="px-4" />
      <magic-player-audio />
    </magic-player-provider>
  </div>
</template>

<style>
@import '@maas/vue-equipment/plugins/MagicPlayer/css/magic-player-audio-controls.css';
</style>

Autoplay

PreviewCode

<template>
  <div class="w-full aspect-[16/9]">
    <magic-player-provider
      id="autoplay-demo-player"
      :options="{
        autoplay: true,
        loop: true,
        src: 'https://stream.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/highest.mp4',
      }"
    >
      <magic-player-video />
    </magic-player-provider>
  </div>
</template>

Poster Image

PreviewCode

<template>
  <div class="w-full aspect-[9/16]">
    <magic-player-provider
      id="image-poster-demo-player"
      :style="{ '--magic-player-provider-aspect-ratio': '9/16' }"
      :options="{
        src: 'https://stream.mux.com/PniSBG6rbyou2x5jExB9EwYQAgBXGyqxXA023GC6JeXQ/highest.mp4',
      }"
    >
      <magic-player-video />
      <magic-player-poster>
        <img
          src="https://image.mux.com/PniSBG6rbyou2x5jExB9EwYQAgBXGyqxXA023GC6JeXQ/thumbnail.jpg?time=8"
          alt="Poster"
        />
      </magic-player-poster>
      <magic-player-overlay />
    </magic-player-provider>
  </div>
</template>

Standalone Controls

PreviewCode

<template>
  <div class="w-full flex flex-col">
    <magic-player-provider
      id="standalone-controls-demo-player"
      :options="{
        src: 'https://stream.mux.com/3wVFr42nN3VqIVv01ugl00oSJTzKlhsZ01ep2yKz5vqeZ8.m3u8',
        srcType: 'hls',
      }"
    >
      <magic-player-video />
      <magic-player-poster>
        <img
          src="https://image.mux.com/3wVFr42nN3VqIVv01ugl00oSJTzKlhsZ01ep2yKz5vqeZ8/thumbnail.jpg?time=4"
          alt="Poster"
        />
      </magic-player-poster>
      <magic-player-overlay />
    </magic-player-provider>
    <div class="relative w-full pt-4 flex items-center">
      <magic-player-video-controls
        id="standalone-controls-demo-player"
        class="bg-black"
        standalone
      >
        <template #timeline-before>
          <magic-player-display-time type="current" />
        </template>
        <template #timeline-after>
          <magic-player-display-time type="duration" />
        </template>
      </magic-player-video-controls>
    </div>
  </div>
</template>

<style>
@import '@maas/vue-equipment/plugins/MagicPlayer/css/magic-player-video-controls.css';
</style>

MagicPlayer ​

Overview ​

Anatomy ​

Overview ​

Vue ​

Nuxt ​

Composable ​

Peer Dependencies ​

Installation ​

API Reference ​

MagicPlayerProvider ​

Props ​

Options ​

CSS Variables ​

MagicPlayerOverlay ​

CSS Variables ​

MagicPlayerVideoControls ​

Props ​

CSS ​

MagicPlayerMuxPopover ​

Props ​

CSS Variables ​

MagicPlayerAudioControls ​

Props ​

CSS ​

MagicPlayerDisplayTime ​

Props ​

Examples ​

Audio Player ​

Autoplay ​

Poster Image ​

Standalone Controls ​

MagicPlayer

Overview

Anatomy

Overview

Vue

Nuxt

Composable

Peer Dependencies

Installation

API Reference

MagicPlayerProvider

Props

Options

CSS Variables

MagicPlayerOverlay

CSS Variables

MagicPlayerVideoControls

Props

CSS

MagicPlayerMuxPopover

Props

CSS Variables

MagicPlayerAudioControls

Props

CSS

MagicPlayerDisplayTime

Props

Examples

Audio Player

Autoplay

Poster Image

Standalone Controls