vidstack

import React, { useRef, useEffect } from 'react'; import { MediaPlayer, MediaProvider, type MediaPlayerInstance } from '@vidstack/react'; import { DefaultVideoLayout, defaultLayoutIcons } from '@vidstack/react/player/layouts/default'; // Import default layout styles import 'vidstack/player/styles/default/theme.css'; import 'vidstack/player/styles/default/layouts/video.css'; function VideoPlayer() { const player = useRef<MediaPlayerInstance>(null); useEffect(() => { // You can use the player API here once it's available if (player.current) { player.current.addEventListener('can-play', () => { console.log('Player is ready to play!'); // Example: Automatically play after 3 seconds if not already playing setTimeout(() => { if (player.current && !player.current.playing) { player.current.play(); } }, 3000); }); } }, []); return ( <div style={{ maxWidth: '800px', margin: 'auto' }}> <h1>My Awesome Video</h1> <MediaPlayer title="Sprite Fight" src="https://files.vidstack.io/sprite-fight/720p.mp4" poster="https://files.vidstack.io/sprite-fight/poster.webp" controls autoplay={false} crossOrigin="anonymous" onCanPlay={() => console.log('Media can play')} ref={player} style={{ '--media-brand': '#21C55E' }} > <MediaProvider /> <DefaultVideoLayout icons={defaultLayoutIcons} /> </MediaPlayer> <p>This is a basic Vidstack player integrated into a React component, demonstrating a self-hosted MP4 video with default UI controls.</p> </div> ); } export default VideoPlayer;