Cloudinary Video Player

Subtitles & Captions

Playlist Subtitles (switch per source)

Full documentation

Example Code:

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

        <video
          id="playlist"
          controls
          muted
          class="cld-video-player"
          width="500"
        ></video>
      
      
        var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });

        // Initialize player
        var player = cld.videoPlayer('player');

        player.source(
          'stubhub',
          {
            textTracks: {
              captions: {
                label: 'English captions',
                language: 'en',
                default: true,
                url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
              },
              subtitles: [
                {
                  label: 'German subtitles',
                  language: 'de',
                  url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
                },
                {
                  label: 'Russian subtitles',
                  language: 'ru',
                  url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
                }
              ]
            }
          }
        );

        // Playlist
        var playlist = cld.videoPlayer('playlist');

        var source1 = {
          publicId: 'stubhub',
          info: { title: 'Subtitles & Captions playlist' },
          textTracks: {
            captions: {
              label: 'English captions',
              language: 'en',
              default: true,
              url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
            },
            subtitles: [
              {
                label: 'German subtitles',
                language: 'de',
                url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
              },
              {
                label: 'Russian subtitles',
                language: 'ru',
                url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
              }
            ]
          }
        };
        var source2 = {
          publicId: '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/outdoors.vtt',
            }
          }
        };
        var source3 = {
          publicId: '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);