Media Player

<MediaPlayer src="video.mp4" poster="poster.jpg" deferred="intent" aspectRatio="16 / 9" />

<MediaPlayer src="video.mp4" poster="poster.jpg" layout="compact" />

<MediaPlayer src="video.mp4" poster="poster.jpg" wrapperAttributes={{ style: 'max-width: 20rem' }} />

<MediaPlayer src="video.mp4" volumeOrientation="vertical" />

<MediaPlayer
	src="vertical.mp4"
	poster="vertical-poster.jpg"
	deferred="click"
	aspectRatio="9 / 16"
	wrapperAttributes={{ style: 'max-width: 20rem' }}
/>

<MediaPlayer
	src="video.mp4"
	tracks={[
		{ src: '/subtitles-en.vtt', srclang: 'en', label: 'English', default: true },
		{ src: '/subtitles-es.vtt', srclang: 'es', label: 'Español' }
	]}
/>

<MediaPlayer
	src="video.mp4"
	subtitlesAppearance="translucent"
	subtitlesSize="small"
	tracks={[{ src: '/subtitles-en.vtt', srclang: 'en', label: 'English', default: true }]}
/>

<MediaPlayer src="video.mp4" skipBackward={15} skipForward={15} playbackRates={[1, 1.5, 2]} />

<script>
	import { MediaPlayer } from 'fluentui-svelte';

	const playlist = ['intro.mp4', 'chapter-1.mp4', 'chapter-2.mp4'];
	let index = $state(0);
</script>

<MediaPlayer
	src={playlist[index]}
	autoplay={index > 0}
	onPrevious={index > 0 ? () => index-- : undefined}
	onNext={index < playlist.length - 1 ? () => index++ : undefined}
	onended={() => index < playlist.length - 1 && index++}
/>

<script>
	import { MediaPlayer, MediaPlayerButton, MenuItem } from 'fluentui-svelte';
	import {
		ArrowDownloadRegular,
		FlagRegular,
		HeartFilled,
		HeartRegular,
		ShareRegular,
		TextBulletListLtrRegular
	} from 'fluentui-icons-svelte';

	let loop = $state(false);
	let liked = $state(false);
	let chapters = $state(false);

	/** Copies a link to the current moment of the video. */
	const share = (time = 0) => navigator.clipboard.writeText(`${location.href}#t=${Math.floor(time)}`);
</script>

<!-- The repeat button is built in: showRepeat shows it, and bind:loop follows it. -->
<MediaPlayer src="video.mp4" showRepeat bind:loop>
	{#snippet startContent()}
		<MediaPlayerButton label="Like" aria-pressed={liked} onclick={() => (liked = !liked)}>
			{#if liked}<HeartFilled />{:else}<HeartRegular />{/if}
		</MediaPlayerButton>
	{/snippet}
	{#snippet centerContent()}
		<MediaPlayerButton label="Chapters" aria-pressed={chapters} onclick={() => (chapters = !chapters)}>
			<TextBulletListLtrRegular />
		</MediaPlayerButton>
	{/snippet}
	{#snippet endContent({ store })}
		<MediaPlayerButton label="Share this moment" class="optional" onclick={() => share(store?.currentTime)}>
			<ShareRegular />
		</MediaPlayerButton>
	{/snippet}
	{#snippet moreContent()}
		<MenuItem icon={ArrowDownloadRegular}>Download</MenuItem>
		<MenuItem icon={FlagRegular}>Report a problem</MenuItem>
	{/snippet}
</MediaPlayer>

<script>
	import { Button, MediaPlayer } from 'fluentui-svelte';

	let player = $state(null);
</script>

<MediaPlayer src="video.mp4" bind:playerRef={player} />
<Button onclick={() => player?.store.seek(0)}>Restart</Button>
<Button onclick={() => player?.store.setPlaybackRate(2)}>Play at 2×</Button>

<MediaPlayer
	src="video.mp4"
	label="Reproductor multimedia"
	labels={{
		play: 'Reproducir',
		pause: 'Pausar',
		fullScreen: 'Pantalla completa',
		moreOptions: 'Más opciones',
		skipBackward: (seconds) => `Retroceder ${seconds} segundos`
	}}
/>