Video Player in Svelte (video tutorial)

Overview

This video tutorial teaches you how to customize and embed the Cloudinary Video Player in your Svelte app.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction to the Cloudinary Video Player

0:00	Videos can increase engagement and provide visual context, but if they are not optimized, they may slow down your site and create a poor user experience. The Cloudinary Video Player helps you deliver videos that are both optimized and customizable, directly inside your Svelte application.

Adding the Video Player in Svelte

0:52

Assuming you have the Svelte Cloudinary SDK set up in your application, you'll first import the Cloudinary Video Player component from the svelte-cloudinary package with import { CldVideoPlayer } from 'svelte-cloudinary';. Then, use the component in your Svelte template, providing the public ID of the video you want to display as the src along with optional width and height. By default, Cloudinary optimizes the video for performance and delivery, ensuring a smooth viewing experience.

Customizing the Player UI

1:32	You can customize the appearance of the player by adjusting properties such as colors and font family. This allows you to align the video player with your site's design and branding.

Adding transformations

2:02	Transformations let you enhance your videos with overlays, watermarks, or other visual modifications. For example, you can overlay an image logo in the bottom-right corner with custom opacity. This example places a semi-transparent logo as a watermark.

Customizing the Player logo

2:26	The Cloudinary Video Player includes a default logo, but you can replace it with your own and specify a destination URL when the logo is clicked. This helps reinforce your branding while providing clickable navigation.

Listening to Player events

2:51	The player supports event listeners such as onPlay and onPause. You can run custom logic when these events are triggered, such as logging playback activity. This gives you flexibility to track analytics, trigger actions, or integrate with other parts of your app.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.