How to use an external HLS library like hls.js with video.js?

preetpal · August 13, 2023, 10:52pm

Hi Nora!
To use an external HLS library like hls.js with video.js use the following detailed tutorial to do so.

Here are the steps to follow:

Include Necessary Libraries
Start by adding the required libraries to your HTML file. This involves including the video.js library for the player’s functionality and the hls.js library for HTTP Live Streaming support. You can achieve this by either referencing local script files or utilizing content delivery networks (CDNs).

<link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.0/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Prepare HTML for Video Playback
Craft an HTML video element that will serve as the foundation for your video player. Assign it id and class attributes, which will be used by the video.js library to establish the player.

<video id="my-video" class="video-js vjs-default-skin" controls>
  <!-- Video sources will be inserted here -->
</video>

Configure and Set Up hls.js
Following the video element, initialize hls.js and tailor its behavior to mesh seamlessly with the video.js player. Determine whether the browser supports HLS natively or not using JavaScript.

<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('my-video');
    var hls = new Hls();

    hls.loadSource('path/to/your/hls/playlist.m3u8');
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'path/to/your/hls/playlist.m3u8';
  }
</script>

Replace 'path/to/your/hls/playlist.m3u8' with the actual URL of your HLS playlist.

Finalize Video.js Player Initialization
Conclude the setup by initializing the video.js player via JavaScript. This step allows you to fine-tune player settings and attributes as needed.

<script>
  var player = videojs('my-video', {
    // Additional player options can be incorporated here
  });
</script>

Optional
Personalize Appearance and Behavior:** To achieve a customized look and feel, you can explore the video.js API for ways to modify the player’s appearance and behavior. Consult the video.js documentation for an extensive range of customization possibilities.

By following these steps, you will have successfully combined the hls.js library with the video.js player to facilitate HTTP Live Streaming within your video playback solution.
Adapt the code as necessary by replacing 'path/to/your/hls/playlist.m3u8' with your actual HLS playlist URL and adjusting settings based on your specific project requirements.