Add high-performance video to your SvelteKit application

When should you use Mux with Svelte?

When adding video to your SvelteKit app, you'll encounter some common hurdles. First, videos are large. Storing them in your public directory can lead to excessive bandwidth consumption and poor Git repository performance. Next, it's important to compress and optimize your videos for the web. Then, as network conditions change, you might want to adapt the quality of your video to ensure a smooth playback experience for your users. Finally, you may want to integrate additional features like captions, thumbnails, and analytics.

You might consider using Mux's APIs and components to handle these challenges, and more.

Use the API to build your video workflow

If you're looking to build your own video workflow that enables uploading, playback, and more in your application, you can use the Mux API and components like Mux Player and Mux Uploader.

Example: allowing users to upload video to your app

One reason you might want to build your own video workflow is when you want to allow users to upload video to your app.

Let's start by adding the Mux Node SDK to your project. We'll be using this a lot.

import Mux from '@mux/mux-node';
import { MUX_TOKEN_ID, MUX_TOKEN_SECRET } from '$env/static/private';
const mux = new Mux({
	tokenId: MUX_TOKEN_ID,
	tokenSecret: MUX_TOKEN_SECRET
});
export default mux;

Now, we can add a new page where users can upload videos. This will involve using the Mux Uploader component, which will upload videos to a Mux Direct Uploads URLAPI.

We'll start by creating an upload URL using the Direct Uploads URL API.

import mux from '$lib/mux';
export const load = async () => {
	// Create an endpoint for MuxUploader to upload to
	const upload = await mux.video.uploads.create({
		new_asset_settings: {
			playback_policy: ['public'],
			encoding_tier: 'baseline'
		},
		// in production, you'll want to change this origin to your-domain.com
		cors_origin: '*'
	});
	return { id: upload.id, url: upload.url };
}

Then, we'll pass that URL to the Mux Uploader component, which will handle uploading for us.

<script>
	import '@mux/mux-uploader';
	export let data;
</script>
<mux-uploader endpoint={data.url} />

Next, we'll create an API endpoint that will listen for Mux webhooks. When we receive the notification that the video has finished uploading and is ready for playback, we'll add the video's metadata to our database.

import mux from '$lib/mux';
import { json } from '@sveltejs/kit';
import { MUX_WEBHOOK_SIGNING_SECRET } from '$env/static/private';
export const POST = async ({ request }) => {
	const body = await request.text();
	// mux.webhooks.unwrap will validate that the given payload was sent by Mux and parse the payload.
	// Generate MUX_WEBHOOK_SIGNING_SECRET in the Mux dashboard
	// https://dashboard.mux.com/settings/webhooks
	const event = mux.webhooks.unwrap(body, request.headers, MUX_WEBHOOK_SIGNING_SECRET);
	// you can also unwrap the payload yourself:
	// const event = await request.json();
	switch (event.type) {
		case 'video.upload.asset_created':
			// we might use this to know that an upload has been completed
			// and we can save its assetId to our database
			break;
		case 'video.asset.ready':
			// we might use this to know that a video has been encoded
			// and we can save its playbackId to our database
			break;
		// there are many more Mux webhook events
		// check them out at https://docs.mux.com/webhook-reference
		default:
			break;
	}
	return json({ message: 'ok' });
};

Finally, let's make a playback page. We retrieve the video metadata from our database, and play it by passing its playbackId to Mux Player:

<script>
	import '@mux/mux-player';
	export let data;
</script>
<mux-player
	playback-id={data.playbackId}
	accentColor="#FF3E00"
/>

And we've got upload and playback. Nice!

What's next? You can integrate with your CMS. You can optimize your loading experience. Or get started with the example project below:

Example projects