Cloudinary Video Player with Subtitles in Different Languages

Subtitle T

by Shirly Manor

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/cld-video-player.css">
<script src="https://unpkg.com/[email protected]/dist/cld-video-player.js"></script>
<div style="max-width: 800px">
<video id="player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>

JavaScript

const player = cloudinary.videoPlayer('player', {
  cloudName: 'maribelmullins',
  fluid: true,
  controls: true,
  floatingWhenNotVisible: 'right',
  showJumpControls: false,
  hideContextMenu: false,
  controlBar: {chaptersButton: true}
});

player.source('502200113_E_cnt_1_r720P-mhb_mkhkqb.mp4', {
  textTracks: {
    subtitles1: {
      label: 'English',
      language: 'en',
      url: 'https://res.cloudinary.com/maribelmullins/raw/upload/v1716265098/502200113_E_cnt_1_r720P-mhb_mkhkqb.en-US.vtt',
      default: true,
     },
    subtitles2: {
      label: 'French',
      language: 'fr',
      url: 'https://res.cloudinary.com/maribelmullins/raw/upload/v1716502996/gnym1akld3wp0rgconsd.fr-FR.azure.vtt'
    },
    subtitles3: {
      label: 'Hebrew',
      language: 'he',
      url: 'https://res.cloudinary.com/maribelmullins/raw/upload/v1716502997/gnym1akld3wp0rgconsd.he-IL.azure.vtt'
    },
    subtitles4: {
      label: 'Polish',
      language: 'pl',
      url: 'https://res.cloudinary.com/maribelmullins/raw/upload/v1716502997/gnym1akld3wp0rgconsd.pl-PL.azure.vtt'
    },
    subtitles5: {
      label: 'Estonian',
      language: 'et',
      url: 'https://res.cloudinary.com/maribelmullins/raw/upload/v1716502998/gnym1akld3wp0rgconsd.et-EE.azure.vtt'
    },
  },
});