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

Help & Support
1

I right now use the video.js package as my video player, there are several circumstances in which the built-in video-HTTP-streaming module is insufficient. I need to add an external HLS (HTTP Live Streaming) module to handle these particular issues. How can I efficiently integrate a third-party HLS library into video.js to meet these specific streaming requirements?

2 Likes
2

Hi @Nora , good to see you back on the community after a long time. I’ve tagged members of our engineering team to help you out. Expect a response in some time.

Are there any supporting details available that will help us understand the problem a bit in more detail?

1 Like
3

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:

  1. 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>
  1. 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>
  1. 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.

  1. 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>
  1. 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.

1 Like