Cloudinary Video Player

Subtitles & Captions

Playlist Subtitles (switch per source)

Full documentation

Example Code:

      
        <video
          id="player"
          controls
          muted
          autoplay
          class="cld-video-player"
          crossorigin="anonymous"
          width="500">
        </video>

        <video
          id="playlist"
          controls
          muted
          class="cld-video-player"
          crossorigin="anonymous"
          width="500">
        </video>
      
      

        // Initialize player
        var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });

        player.source(
          'video-player/stubhub',
          {
            textTracks: {
              captions: {
                label: 'English captions',
                language: 'en',
                default: true,
                url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt'
              },
              subtitles: [
                {
                  label: 'German subtitles',
                  language: 'de',
                  url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt'
                },
                {
                  label: 'Russian subtitles',
                  language: 'ru',
                  url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt'
                }
              ]
            }
          }
        );

        // Playlist
        var playlist = cloudinary.videoPlayer('playlist', { cloud_name: 'demo' });

        var source1 = {
          publicId: 'video-player/stubhub',
          info: { title: 'Subtitles & Captions playlist' },
          textTracks: {
            captions: {
              label: 'English captions',
              language: 'en',
              default: true,
              url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt'
            },
            subtitles: [
              {
                label: 'German subtitles',
                language: 'de',
                url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt'
              },
              {
                label: 'Russian subtitles',
                language: 'ru',
                url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt'
              }
            ]
          }
        };

        var source2 = {
          publicId: 'video-player/outdoors',
          info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
          textTracks: {
            captions: {
              label: 'English captions',
              language: 'en',
              default: true,
              url: 'https://res.cloudinary.com/demo/raw/upload/v1636971261/video-player/vtt/outdoors.vtt',
            }
          }
        };

        var source3 = {
          publicId: 'video-player/dog',
          info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
        };

        var playlistSources = [source1, source2, source3];

        var playlistOptions = {
            autoAdvance: true,
            repeat: true,
            presentUpcoming: 8
        };

        playlist.playlist(playlistSources, playlistOptions);