MagicPlayer

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

Preview

Code

<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

• Overview
• Anatomy
• Overview
• Peer Dependencies
• API Reference
• Examples

Anatomy

<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

• Overview
• Anatomy
• Overview
• Peer Dependencies
• API Reference
• Examples

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

pnpm

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

npm

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

yarn

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

bun

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.

@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.

@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

Preview

Loveless

0:00

0:00

Code

<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

Preview

Code

<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

Preview

Code

<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

Preview

Code

<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>

Composable

Preview

Code

<template>
  <div class="w-full flex flex-col gap-4 items-center">
    <div class="w-full aspect-[16/9]">
      <magic-player-provider
        id="composable-demo-player"
        :options="{
          autoplay: true,
          loop: true,
          src: 'https://stream.mux.com/kj7uNjRztuyNotBkAI55oUeVKSSN1C4ONrIYuYcRKxo/highest.mp4',
        }"
      >
        <magic-player-video />
      </magic-player-provider>
    </div>
    <div class="flex gap-4">
      <m-button @click="playerApi.videoApi.togglePlay()">
        Toggle Play
      </m-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useMagicPlayer } from '@maas/vue-equipment/plugins'
const playerApi = useMagicPlayer('composable-demo-player')
</script>