<CldVideoPlayer /> Examples

Basic Usage

Standard Cloudinary Video Player with playback.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  width="1620"
  height="1080"
  src="<Your Public ID>"
/>

Playback

Adaptive Bitrate Streaming (ABR)

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="adaptive-bitrate-streaming"
  src="<Your Public ID>"
  width="1620"
  height="1080"
  transformation={{
    streaming_profile: 'hd',
  }}
  sourceTypes={['hls']}
/>

Picture-in-Picture

Utilizes the browser’s Picture-in-Picture API to create a floating video on top of other windows.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="picture-in-picture"
  src="<Your Public ID>"
  width="1620"
  height="1080"
  pictureInPictureToggle
/>

Player Customization

Chapters & Selector

Adding a button to select chapters.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="chapters-selector"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  chapters={{
    0: 'Chapter 1',
    6: 'Chapter 2',
    9: 'Chapter 3',
  }}
  chaptersButton
/>

Colors & Font

Changing the player theme using colors and fonts.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="custom-colors-font"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff',
  }}
  fontFace="Source Serif Pro"
/>

Logo

Adding a custom logo to the player chrome.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="custom-logo"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  logo={{
    imageUrl: '/svelte.png',
    onClickUrl: 'https://svelte.dev',
  }}
/>

Poster URL

Allows you to change the poster used for the player.

<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="poster-custom-url"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  poster={getCldImageUrl({
    src: '<Your Public ID>',
  })}
/>

Poster Transformations

Adding effects to the video’s auto-generated thumb.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="poster-transformations"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  poster={{
    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.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="subtitles"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  textTracks={{
    captions: {
      label: 'English',
      language: 'en',
      default: true,
      url: 'https://res.cloudinary.com/<Cloud Name>/raw/upload/<FileName>.vtt'
    }
  }}
/>

Learn more on the Video Player Reference or the Subtitles and Captions guide.

Transformations

Cropping & Resizing

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="cropping-resizing"
  src="<Your Public ID>"
  width="500"
  height="500"
  transformation={{
    width: 500,
    height: 500,
    crop: 'fill',
    gravity: 'auto',
  }}
/>

Image Overlays

Place an image over the video (e.g. watermarks).

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="image-overlays"
  src="<Your Public ID>"
  width="1620"
  height="1080"
  transformation={{
    overlay: '<Your Public ID>',
    width: 150,
    gravity: 'north_east',
    x: 50,
    y: 50,
    opacity: 80,
  }}
/>

Advanced

Localization

Provides localization options for player labels. Uses Video.js JSON format to provide labels.

<script>
  import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
  id="localization"
  src="<Your Public ID>"
  width="4096"
  height="2160"
  language="es"
  languages={{
    es: {
      Play: 'Reproducción',
      'Play Video': 'Reproduce el Video',
      Pause: 'Pausa',
      'Current Time': 'Tiempo reproducido',
      Duration: 'Duración total',
      'Remaining Time': 'Tiempo restante',
      'Stream Type': 'Tipo de secuencia',
      LIVE: 'DIRECTO',
      Loaded: 'Cargado',
      Progress: 'Progreso',
      Fullscreen: 'Pantalla completa',
      'Non-Fullscreen': 'Pantalla no completa',
      Mute: 'Silenciar',
      Unmute: 'No silenciado',
      'Playback Rate': 'Velocidad de reproducción',
      Subtitles: 'Subtítulos',
      'subtitles off': 'Subtítulos desactivados',
      Captions: 'Subtítulos especiales',
      'captions off': 'Subtítulos especiales desactivados',
      Chapters: 'Capítulos',
      '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.',
    },
  }}
/>