Use Vidstack on an Astro Page

[nicolatroehler]

I'm trying to get Vidstack to work as a web component for Astro. This is my code so far, but it's not rendering anything. Does anyone have vidstack implemented successfully on an Astro Page?

---
import BaseLayout from "../layouts/BaseLayout.astro";
import "vidstack/bundle";
---

<BaseLayout title="Vidstack">
  This is a Video Test
  <media-player
    title="Sprite Fight"
    src="https://files.vidstack.io/sprite-fight/720p.mp4"
  >
    <media-provider></media-provider>
    <media-video-layout
      thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt"
    ></media-video-layout>
  </media-player>
</BaseLayout>

[DiegoxK]

I managed to implement it like this after trying a bunch of things:

---
import 'vidstack/player/styles/default/theme.css'
import 'vidstack/player/styles/default/layouts/video.css'

const { src, title, poster } = Astro.props
---

<script>
	import 'vidstack/player'
	import 'vidstack/player/layouts/default'
	import 'vidstack/player/ui'
</script>

<media-player title={title} src={src} volume={0.2} controls={false} playsInline>
	<media-provider>
		<media-poster class="vds-poster" src={poster}></media-poster>
	</media-provider>
	<media-video-layout></media-video-layout>
</media-player>

But i don't think is the intended way though

[hrishikesh-k]

Here's mine:

• Astro component: https://github.com/hrishikesh-k/tejal/blob/v9/src/components/video.astro
• JavaScript: https://github.com/hrishikesh-k/tejal/blob/v9/src/utils/components/video.ts

My JavaScript has a lot of stuff because I'm mainly generating the M3U8 playlists on-the-fly.