Cloudinary Video Player

Subtitles & Captions

Playlist Subtitles (switch per source)

Paced & Styled Captions

Karaoke player (transcript URL)

Translated Transcript

Example Code:

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

        <!-- ... a few more <video> tags -->
      
      

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

        player.source(
          'video/examples/big_buck_bunny_trailer_720p',
          {
            info: { title: 'SRT & VTT from URL' },
            textTracks: {
              options: {
                theme: "videojs-default"
              },
              captions: {
                label: 'VTT from URL',
                default: true,
                url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.vtt'
              },
              subtitles: [
                {
                  label: 'SRT from URL',
                  url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.srt'
                }
              ]
            }
          }
        );

        // 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: 'prod'
        });

        const publicId = 'video/examples/cloudinary-marketing';

        const 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',
            maxWords: 4,
            default: true,
          }
        }
        pacedPlayer.source(publicId, {
          textTracks
        });

        // Karaoke
        const karaokePlayer = cloudinary.videoPlayer('karaoke', {
          cloudName: 'prod'
        });

        karaokePlayer.source('video/examples/cld-imagine_1080p', {
          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',
              wordHighlight: true,
              maxWords: 8,
              url: 'https://res.cloudinary.com/prod/raw/upload/v1/video/examples/cld-imagine_1080p.transcript',
              default: true
            }
          }
        });

        // Auto-translated transcript
        const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', {
          cloudName: 'prod'
        });

        translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', {
          textTracks: {
            captions: {
              label: "Original",
              default: true,
            },
            subtitles: [
              {
                label: "English",
                language: "en-US",
              },
              {
                label: "Polish",
                language: "pl-PL",
              },
              {
                label: "Hebrew",
                language: "he-IL",
              },
              {
                label: "Italian",
                language: "it-IT",
              },
              {
                label: "Ukrainian",
                language: "uk-UA",
              }
            ]
          }
        });