Video Player

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add video-player

npx @motion-core/cli add video-player

Import the component

Import the component into your Svelte file:

import { VideoPlayer } from "$lib/motion-core";

import { VideoPlayer } from "$lib/motion-core";

Usage

00:00

0:00 / 0:00

Props

Autoplay

Muted

Loop

Hide Controls

<script lang="ts">
	import { VideoPlayer } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof VideoPlayer>>;

	let {
		autoplay = false,
		muted = true,
		loop = true,
		hideControls = false,
	}: Props = $props();
</script>

<div class="flex items-center justify-center px-8 py-16">
	<VideoPlayer
		src="https://videos.pexels.com/video-files/35217201/14919167_1920_1080_30fps.mp4"
		{autoplay}
		{muted}
		{loop}
		{hideControls}
	/>
</div>

<script lang="ts">
	import { VideoPlayer } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof VideoPlayer>>;

	let {
		autoplay = false,
		muted = true,
		loop = true,
		hideControls = false,
	}: Props = $props();
</script>

<div class="flex items-center justify-center px-8 py-16">
	<VideoPlayer
		src="https://videos.pexels.com/video-files/35217201/14919167_1920_1080_30fps.mp4"
		{autoplay}
		{muted}
		{loop}
		{hideControls}
	/>
</div>

Props

VideoPlayer

Prop	Type	Default
`src`	`string`	`undefined`
`poster`	`string`	`undefined`
`autoplay`	`boolean`	`false`
`muted`	`boolean`	`true`
`loop`	`boolean`	`false`
`hideControls`	`boolean`	`false`
`class`	`string`	`undefined`