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>
      
      
        var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
        var playerHls = cld.videoPlayer('example-player-hls');
        var playerDash = cld.videoPlayer('example-player-dash');

        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);
        });