Media Player

A media player plays a video with Fluent transport controls: a seek bar with the time, volume, subtitles, skip buttons, playback speed, picture-in-picture and full screen. Video.js runs the playback, the keyboard shortcuts and the gestures underneath.

Usage

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

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

Deferred loading

deferred shows the poster with a large play button and holds back the player, Video.js and the media until that button is pressed: a page full of videos nobody plays downloads none of them. With click loading starts on the press, with intent once the pointer or the focus reaches the button, and with visible as soon as the player scrolls into view.

View Code

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

Compact layout

layout="compact" fits the play button, the seek bar and the essential buttons into one row, ideal for cards and small embeds.

View Code

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

Narrow players

Below 26rem of width, the standard layout trims itself down to the volume, play, picture-in-picture and full screen buttons.

View Code

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

Vertical volume

volumeOrientation="vertical" stands the volume slider upright above its button, handy when the row is short on space.

View Code

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

Vertical video

A vertical video grows as tall as its width allows. Give the player a width and match aspectRatio to the media, here 9 / 16, to reserve its space while it loads. At that width only the essential buttons remain.

View Code

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

Subtitles

Pass WebVTT files in tracks. A single track gets a toggle button, and several get a menu to choose from.

View Code

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

Subtitles appearance

subtitlesAppearance="translucent" swaps the acrylic panel for light text on a dark veil, close to native subtitles. subtitlesSize picks small, medium or large.

View Code

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

Skip buttons and playback speed

skipBackward accepts 10 or 15 seconds and skipForward 10, 15 or 30, while 0 hides either button. playbackRates lists the speeds of the more options menu; an empty list removes them.

View Code

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

Previous and next

onPrevious and onNext add previous and next buttons around the playback controls. The system media controls, picture-in-picture included, trigger them as well.

View Code

<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++}
/>

1 / 4 · Mux sample

Custom controls and menu items

showRepeat adds the built-in repeat button, bound to loop. startContent, centerContent and endContent place your own controls in each group of the row, while moreContent extends the more options menu; all of them receive the Video.js store. MediaPlayerButton gives a control the built-in look and tooltip, and the optional class hides it in narrow players.

View Code

<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>

Repeat: off · Like: off · Chapters: off · Shared: 0

Controlling the player from code

Bind playerRef to reach the Video.js store and drive the player through its state and actions, such as seek, play, pause or setPlaybackRate.

View Code

<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>

Texts and translations

labels sets the names and tooltips of the controls, menus and messages. Missing texts fall back to English, and custom controls receive the final set to name themselves consistently. Every player on this page follows the language of the site.

View Code

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

Component Props

Name	Type	Default	Description
`src`	`string`		The URL of the media to play.
`poster`	`string`		The image shown until the media plays.
`tracks`	`MediaPlayerTrack[]`		The text tracks of the media: subtitles, captions or chapters.
`layout`	`'standard'` \| `'compact'`	`'standard'`	How the transport controls are laid out.
`deferred`	`'click'` \| `'intent'` \| `'visible'`		Shows a light splash in place of the player, with the poster and a play button, and loads the player, its scripts and the media only when the play button is pressed. Video.js and the media download nothing before.
`aspectRatio`	`string`	`'16 / 9'`	The shape of the player until its media loads, and of the splash of a deferred player, as a CSS `aspect-ratio`. Match it to the media and nothing moves once the video arrives.
`volumeOrientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	The direction of the volume slider in its popup.
`autoHideControls`	`boolean`	`true`	Hides the transport controls while the media plays and the user rests, and shows them again on any activity. `false` keeps them on screen.
`autoHideWhenPaused`	`boolean`		Hides the transport controls of a paused media too, once the user rests. Without it, a pause keeps them on screen.
`subtitlesAppearance`	`'acrylic'` \| `'translucent'`	`'acrylic'`	How the subtitles look.
`subtitlesSize`	`'small'` \| `'medium'` \| `'large'`	`'medium'`	The size of the subtitles text. A narrow player takes one step down.
`loop` bindable	`boolean`		Plays the media again from the start when it ends. The repeat button toggles it.
`showRepeat`	`boolean`		Shows a repeat button, which toggles `loop`.
`skipBackward`	`0` \| `10` \| `15`	`10`	How many seconds the skip back button rewinds. `0` hides the button.
`skipForward`	`0` \| `10` \| `15` \| `30`	`30`	How many seconds the skip forward button advances. `0` hides the button.
`playbackRates`	`number[]`	`[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`	The speeds of the more options menu. An empty list removes the playback speed group.
`onPrevious`	`() => void`		Shows a previous button and calls this when it is pressed, or when the system media controls ask for the previous track.
`onNext`	`() => void`		Shows a next button and calls this when it is pressed, or when the system media controls ask for the next track.
`startContent`	`Snippet` \| `Component`		Custom controls at the start of the button row, after the volume and subtitles buttons.
`centerContent`	`Snippet` \| `Component`		Custom controls in the middle of the button row, after the next button.
`endContent`	`Snippet` \| `Component`		Custom controls at the end of the button row, before the picture-in-picture button.
`moreContent`	`Snippet` \| `Component`		Custom items for the more options menu, after the playback speed group. Use the Menu items.
`label`	`string`	`'Media player'`	The accessible name of the player.
`labels`	`Partial<MediaPlayerLabels>`		The texts of the controls, their tooltips and menus. The ones left out fall back to English.
`ref` bindable	`HTMLVideoElement` \| `null`		The DOM reference of the native video element. The other attributes of the player are applied to it.
`playerRef` bindable	`VideoPlayerElement`		The `<video-player>` element of Video.js. Its `store` holds the state and the actions of the player.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the element that draws the player.
`children`	`Snippet`		Extra `<source>` or `<track>` elements for the video.
`HTMLVideoAttributes` without `src`, `poster`, `controls`, `children`, `loop`

MediaPlayerButton

Name	Type	Default	Description
`label`	`string`		The accessible name of the button, also shown in its tooltip.
`tooltipPlacement`	`Placement`	`'top'`	Where the tooltip is placed relative to the button.
`hideTooltip`	`boolean`		Keeps the tooltip closed, for a button whose popup is open.
`ref` bindable	`HTMLButtonElement` \| `null`		The DOM reference of the button element.
`children`	`Snippet`		The icon of the button.
`ButtonProps<'button'>` without `ref`, `children`, `appearance`

Components

Media Player

Usage

Deferred loading

Compact layout

Narrow players

Vertical volume

Vertical video

Subtitles

Subtitles appearance

Skip buttons and playback speed

Previous and next

Custom controls and menu items

Controlling the player from code

Texts and translations

Component Props

MediaPlayerButton