Frameworks

Vega Player is a standard Custom Element, so it works wherever HTML works. Every attribute is also a property that reflects back to the attribute, which is what modern frameworks use when they pass props to custom elements. Values set before the script has loaded are applied when the element upgrades.

1
import { useEffect, useRef } from 'react';
2
import './vega-player.js';
3

4
export function Trailer({ src }) {
5
  const ref = useRef(null);
6

7
  useEffect(() => {
8
    const onEnded = () => console.log('ended');
9
    ref.current.addEventListener('vega-player:ended', onEnded);
10
    return () => ref.current?.removeEventListener('vega-player:ended', onEnded);
11
  }, []);
12

13
  return <vega-player ref={ref} src={src} color-primary="#ff6a2b" show-playback-rate />;
14
}

1
<script setup>
2
import { onMounted, ref } from 'vue';
3
import './vega-player.js';
4

5
const player = ref(null);
6
onMounted(() => {
7
  player.value.addEventListener('vega-player:play', () => console.log('play'));
8
});
9
</script>
10

11
<template>
12
  <vega-player ref="player" src="/video.mp4" :thumbnails="thumbsUrl" show-playback-rate />
13
</template>

Tell Vue it is a custom element (in vite.config.js):

1
vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'vega-player' } } })

1
<script>
2
  import { onMount } from 'svelte';
3
  import './vega-player.js';
4

5
  let { src } = $props();
6
  let player;
7

8
  onMount(() => {
9
    player.addEventListener('vega-player:ended', () => console.log('ended'));
10
  });
11
</script>
12

13
<vega-player bind:this={player} {src} show-playback-rate></vega-player>

1
---
2
const { src } = Astro.props;
3
---
4
<script type="module" src="/vega-player.js"></script>
5
<vega-player src={src} thumbnails={`${src}.vtt`}></vega-player>

1
<vega-player
2
  src="<?= htmlspecialchars($video['url']) ?>"
3
  poster="<?= htmlspecialchars($video['poster']) ?>"
4
  thumbnails="/thumbs/<?= (int) $video['id'] ?>/thumbnails.vtt">
5
</vega-player>

Server-side rendering

The player renders on the client. During server rendering the tag is output as-is and upgrades as soon as the script loads; set aspect-ratio so the page reserves the right space in the meantime.