@lumra/embed

v0.1.17

Published

16 days ago

Lumra media player — CDN / vanilla JS embed for non-React environments

0High
0Medium
0Low

@lumra/embed

Self-contained CDN bundle for Lumra. One script tag, works in any HTML page — PHP, Laravel, Django, WordPress, plain HTML. No npm, no build step, no React knowledge required.

CDN

<!-- jsDelivr (recommended) -->
<script src="https://cdn.jsdelivr.net/npm/@lumra/[email protected]/dist/lumra-player.global.js"></script>

<!-- unpkg (fallback) -->
<script src="https://unpkg.com/@lumra/[email protected]/dist/lumra-player.global.js"></script>

Quick Start

<div id="player" style="aspect-ratio: 16/9"></div>

<script src="https://cdn.jsdelivr.net/npm/@lumra/[email protected]/dist/lumra-player.global.js"></script>
<script>
const player = Lumra.createPlayer(document.getElementById('player'), {
  src:    'https://example.com/video.m3u8',  // HLS or MP4
  poster: 'https://example.com/thumb.jpg',
  mediaInfo: {
    title:   'My Video',
    creator: { name: 'Studio Name' },
  },
})
</script>

With Paywall

The player handles the UI. You handle the checkout — return a URL, the player redirects.

<script>
Lumra.createPlayer(document.getElementById('player'), {
  src: 'https://example.com/premium.m3u8',

  paywall: {
    locked:   true,
    title:    'Unlock this video',
    subtitle: 'One-time purchase',
    options: [
      { id: 'buy',  label: 'Buy',  badge: '$9.99', description: 'Own forever' },
      { id: 'rent', label: 'Rent', badge: '$2.99', description: '48-hour stream' },
    ],
    onUnlock: async (optionId) => {
      const res = await fetch('/api/checkout', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ resourceId: 'my-video', optionId }),
      })
      const { url } = await res.json()
      window.location.href = url   // redirect to Stripe / PayPal
    },
  },
})
</script>

With Chapters

Pass a chapters array — markers appear on the seek bar automatically. Users click to jump.

<script>
const player = Lumra.createPlayer(el, {
  src: '...',
  chapters: [
    { at: 0,   title: 'Intro' },
    { at: 60,  title: 'Act 1' },
    { at: 180, title: 'Climax' },
  ],
})

// Programmatic skip to a chapter
player.seek(60)
</script>

In PHP / Laravel Blade

<!-- In your layout / <head> -->
<script src="https://cdn.jsdelivr.net/npm/@lumra/[email protected]/dist/lumra-player.global.js"></script>

<!-- In your Blade template -->
<div id="player" style="aspect-ratio:16/9"></div>
<script>
Lumra.createPlayer(document.getElementById('player'), {
  src:    '{{ $video->stream_url }}',
  poster: '{{ $video->poster_url }}',
  paywall: {
    locked:  {{ $locked ? 'true' : 'false' }},
    options: @json($video->pricing_options),
    onUnlock: async (optionId) => {
      const res = await fetch('/api/checkout', {
        method:  'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ resourceId: '{{ $video->id }}', optionId }),
      })
      const { url } = await res.json()
      window.location.href = url
    },
  },
})
</script>

Data attribute embed (zero JS)

Add data-lumra to any element — the player initialises automatically:

<div data-lumra
     src="/videos/my-video.mp4"
     poster="/thumbs/my-video.jpg"
     autoplay muted
     data-accent="#a89ef9"
     style="aspect-ratio: 16/9">
</div>

Supported attributes: src, poster, autoplay, muted, loop, data-accent (hex), data-radius.

With LUT colour grading (Premium)

Real-time WebGL colour grading via .cube LUT files. Requires a Lumra LUT license key.

<script>
const player = Lumra.createPlayer(document.getElementById('player'), {
  src: 'https://example.com/video.m3u8',
  lut: {
    licenseKey:      'LUMRA-LUT-XXXXXXXX-XXXXXXXX',
    verifyEndpoint:  'https://lumra.reelfoundry.au/api/verify',
    verifyPublicKey: '-----BEGIN PUBLIC KEY-----\nMIIB...\n-----END PUBLIC KEY-----',
    url:             '/luts/cinematic.cube',
    intensity:       0.85,
    purchaseUrl:     'https://your-site.com/purchase',  // shown in the license-required banner
  },
})

// Hot-swap LUT or adjust blend at runtime
await player.setLut('/luts/vintage.cube')
player.setIntensity(0.5)  // 0 = original, 1 = fully graded
</script>

Use LUMRA-LUT-DEMO0001-DEMO0001 as the license key during local development (localhost only).

Hiding your license key (proxy mode)

In CDN/plain-HTML pages the licenseKey is visible in your page source. Use a server-side proxy so the key never reaches the browser:

<script>
// ✅ No licenseKey in browser code — proxy adds it server-side
Lumra.createPlayer('#player', {
  lut: {
    verifyEndpoint: '/api/lumra-verify',
    url: '/luts/cinematic.cube',
  },
})
</script>

Your /api/lumra-verify endpoint adds key: process.env.LUMRA_LICENSE_KEY and proxies to https://lumra.reelfoundry.au/api/verify. See the @lumra/plugins README for full Node.js, PHP, and Next.js examples.

Player handle API

const player = Lumra.createPlayer(el, { ... })

player.update({ paywall: { locked: false } })  // unlock after successful payment
player.seek(30)                                 // jump to 30 seconds
player.play()
player.pause()
player.destroy()

// LUT colour grading (requires lut.licenseKey in options)
await player.setLut('/luts/noir.cube')  // swap LUT file at runtime
player.setIntensity(0.5)               // blend: 0 = original, 1 = fully graded

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@lumra/embed

CDN

Quick Start

With Paywall

With Chapters

In PHP / Laravel Blade

Data attribute embed (zero JS)

With LUT colour grading (Premium)

Hiding your license key (proxy mode)

Player handle API