Basic Usage
Standard Cloudinary Video Player with playback.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
Playback
Adaptive Bitrate Streaming (ABR)
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
id = " adaptive-bitrate-streaming "
Picture-in-Picture
Utilizes the browser’s Picture-in-Picture API to create a floating video on top of other windows.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
Player Customization
Chapters & Selector
Adding a button to select chapters.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
Colors & Font
Changing the player theme using colors and fonts.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
fontFace = " Source Serif Pro "
Logo
Adding a custom logo to the player chrome.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
onClickUrl: ' https://svelte.dev ' ,
Poster URL
Allows you to change the poster used for the player.
import { CldVideoPlayer, getCldImageUrl } from ' svelte-cloudinary ' ;
Poster Transformations
Adding effects to the video’s auto-generated thumb.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
id = " poster-transformations "
tint: ' equalize:80:blue:blueviolet ' ,
Captions and Subtitles
The textTracks
prop allows you to add captions or subtitles to the player. Each Text Track is an object containing details about where the captions or subtitles should
be loaded from as well as any customization of that track.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
url: ' https://res.cloudinary.com/<Cloud Name>/raw/upload/<FileName>.vtt '
Learn more on the Video Player Reference or
the Subtitles and Captions guide .
Cropping & Resizing
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
Image Overlays
Place an image over the video (e.g. watermarks).
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
overlay: ' <Your Public ID> ' ,
Advanced
Localization
Provides localization options for player labels. Uses Video.js JSON format to provide labels.
import { CldVideoPlayer } from ' svelte-cloudinary ' ;
' Play Video ' : ' Reproduce el Video ' ,
' Current Time ' : ' Tiempo reproducido ' ,
Duration: ' Duración total ' ,
' Remaining Time ' : ' Tiempo restante ' ,
' Stream Type ' : ' Tipo de secuencia ' ,
Fullscreen: ' Pantalla completa ' ,
' Non-Fullscreen ' : ' Pantalla no completa ' ,
' Playback Rate ' : ' Velocidad de reproducción ' ,
' subtitles off ' : ' Subtítulos desactivados ' ,
Captions: ' Subtítulos especiales ' ,
' captions off ' : ' Subtítulos especiales desactivados ' ,
' Close Modal Dialog ' : ' Cerca de diálogo modal ' ,
' You aborted the video playback ' :
' Ha interrumpido la reproducción del vídeo. ' ,
' A network error caused the video download to fail part-way. ' :
' Un error de red ha interrumpido la descarga del vídeo. ' ,
' The video could not be loaded, either because the server or network failed or because the format is not supported. ' :
' No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible. ' ,
' The video playback was aborted due to a corruption problem or because the video used features your browser did not support. ' :
' La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece. ' ,
' No compatible source was found for this video. ' :
' No se ha encontrado ninguna fuente compatible con este vídeo. ' ,