Cloudinary Video Player

Subtitles & Captions

Playlist Subtitles (switch per source)

Paced & Styled Captions

Max Words Theme Default VideoJS Default Player Colors Yellow Outlined 3D Font Inter Ceviche One Merienda Ultra Kavoon Erica One Corben Bungee Spice (Color) Nabla (Color) Gravity Bottom Bottom Left Bottom Right Top Top Left Top Right Center Center Left Center Right Apply

Karaoke player

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>

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

        <video
          id="karaoke"
          controls
          muted
          autoplay
          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);

        // Paced
        const pacedPlayer = cloudinary.videoPlayer('paced', {
          cloudName: 'demo',
          autoplay: true,
          muted: true
        });

        pacedPlayer.source('lincoln', {
          textTracks: {
            options: {
              // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
              // fontFace: "", // any Google font
              // fontSize: "", // any CSS value
              // gravity: "", // i.e. 'top-left', 'center' etc
              // box: { // Object of x/y/width/height
              //   x: "0%",
              //   y: "0%",
              //   width: "100%",
              //   height: "100%"
              // },
              // style: { // Styles key-value object
              //   color: "hotpink"
              // }
            },
            captions: {
              label: 'English Paced',
              language: 'en',
              maxWords: 4,
              default: true
            },
            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'
              }
            ]
          }
        });

        // Karaoke
        const karaokePlayer = cloudinary.videoPlayer('karaoke', {
          cloudName: 'demo',
          autoplay: true,
          muted: true
        });

        karaokePlayer.source('lincoln', {
          textTracks: {
            options: {
              fontFace: 'Lobster',
              fontSize: '200%',
              gravity: 'top',
              wordHighlightStyle: {
                color: 'white',
                'text-shadow': `2px 2px 0px violet,
                  4px 4px 0px indigo,
                  6px 6px 0px blue,
                  8px 8px 0px green,
                  10px 10px 0px yellow,
                  12px 12px 0px orange,
                  14px 14px 0px red`
              }
            },
            captions: {
              label: 'KARAOKE',
              language: 'en',
              wordHighlight: true,
              maxWords: 5,
              timeOffset: -0.2,
              default: true
            }
          }
        });