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: 'shirly-assets',
  fluid: true,
  controls: true,
  floatingWhenNotVisible: 'right',
  showJumpControls: false,
  hideContextMenu: false,
});

player.source('jo0oq2f1bpl4wbyh8xgr.mp4', {
  textTracks: {
    subtitles1: {
      label: 'English',
      language: 'en',
      url: 'https://res.cloudinary.com/shirly-assets/raw/upload/v1722878000/ye0pjbblmdoaogdlsime.et-EE.azure.transcript',
      default: true,
     },
    subtitles3: {
      label: 'Hebrew',
      language: 'he',
      url: 'https://res.cloudinary.com/shirly-assets/raw/upload/v1722878000/ye0pjbblmdoaogdlsime.he-IL.azure.vtt'
    },
    subtitles5: {
      label: 'Estonian',
      language: 'et',
      url: 'https://res.cloudinary.com/shirly-assets/raw/upload/v1722878001/ye0pjbblmdoaogdlsime.et-EE.azure.vtt'
    },
  },
});