<< Back to examples index

Cloudinary Video Player

Adaptive streaming

The player supports adaptive streaming formats such as HLS and MPEG-DASH:
HLS is supported out-of-the-box and is already bundled in the player's package.
MPEG-DASH support can be added by including 'dash.js' and 'videojs-contrib-dash' packages (example below).

Simply set 'sourceTypes' to the desired format ('dash' or 'hls'). You can define a desired streaming profile ('sd', 'hd', etc') using the 'transformation' param.

Example Code:

      HTML:

      <!-- Cloudinary Video Player Dependencies -->
      <script type="text/javascript" src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
      <script type="text/javascript" src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.2/videojs-dash.min.js></script>

      <video
        id="example-player-hls"
        controls
        muted
        class="cld-video-player cld-video-player-skin-dark">
      </video>

      <video
        id="example-player-dash"
        controls
        muted
        class="cld-video-player cld-video-player-skin-dark">
      </video>

      JavaScript:

      var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

      // Initialize player
      var playerHls = cld.videoPlayer('example-player-hls');
      var playerDash = cld.videoPlayer('example-player-dash');

      // Modify player source
      playerHls.source('oceans', { sourceTypes: ['hls'], transformation: { streaming_profile: 'hd' }, info: { title: "HLS" } }).play();
      playerDash.source('oceans', { sourceTypes: ['dash'], transformation: { streaming_profile: 'hd' }, info: { title: "MPEG-DASH" } }).play();