Cloudinary Video Player

Adaptive streaming

Adaptive streaming documentation

Example Code:

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

        <video
          id="example-player-dash"
          controls
          autoplay
          muted
          width="500"
          class="cld-video-player">
        </video>
      
      
        const config =  {cloud_name: 'demo'};

        var playerHls = cloudinary.videoPlayer('example-player-hls', config);
        var playerDash = cloudinary.videoPlayer('example-player-dash' , config);

        playerHls.source(
          'sea_turtle',
          {
            sourceTypes: ['hls'],
            transformation: {streaming_profile: 'hd'},
            info: {title: 'HLS'}
          }
        );

        playerDash.source(
          'sea_turtle',
          {
            sourceTypes: ['dash'],
            transformation: {streaming_profile: 'hd'},
            info: {title: 'MPEG-DASH'}
          }
        );

        playerHls.on('qualitychanged', (data) => {
          console.log('HLS player', data);
        });

        playerDash.on('qualitychanged', (data) => {
          console.log('Dash player', data);
        });