Motion Core

showcase

Video Player

A refined video player component with a progress slider and smooth GSAP-powered interactions.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies:
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
<script lang="ts">
	import { VideoPlayer } from "motion-core";
</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={false}
		muted={true}
		loop={true}
	/>
</div>

Props

VideoPlayer

PropTypeDefault
src
string undefined
poster
string undefined
autoplay
boolean false
muted
boolean true
loop
boolean false
class
string ""