Cloudinary Video Player

Chapters

From a VTT file

From a config object on source()

From an automatically taken VTT file

Full documentation

Example Code:

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

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

        <video
          id="player-auto-vtt"
          controls
          muted
          autoplay
          class="cld-video-player"
          width="600"
      ></video>
      
      

        const playerVTT = cloudinary.videoPlayer('player-vtt', {
          cloud_name: 'demo',
          publicId: 'snow_horses',
          info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
          chapters: {
            url: 'https://res.cloudinary.com/tsachi/raw/upload/tests/snow_horses_chapters_k1e1ff.vtt'
          },
          chaptersButton: true
        });

        const playerSourceConf = cloudinary.videoPlayer('player-config', {
          cloud_name: 'demo',
          chaptersButton: true
        });

        playerSourceConf.source('snow_horses', {
          info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
          chapters: {
            0: 'Opening credits',
            3: 'A dangerous quest',
            8: 'The attack'
          },
        });

        const playerAutoVTT = cloudinary.videoPlayer('player-auto-vtt', {
          cloud_name: 'demo',
          publicId: 'snow_horses',
          chapters: true,
        });