Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to play HLS stream in HTML5 player Video.JS?
In this tutorial, we're going to learn how to play HLS stream in HTML5 video player using video.js.
HTTP Live Streaming, also known as HLS Stream, is a HTTP-based communication protocol which used dynamic or adaptive bit rate for streaming videos. This protocol was developed and published by Apple Inc. in the year 2009 and a wide variety of media player, web browsers, mobile devices and streaming media players support this protocol.
HLS has the benefit of being compatible with all Internet-connected devices, making it easier to adopt than streaming protocols that need the usage of specialist servers. Another advantage is that an HLS stream may adjust video quality based on network constraints without interfering with playing. While a result, video quality may improve or deteriorate in the midst of a video as the consumer watches it.
So, we'll try to use an HLS stream is our video player in the web browser using video.js in the next section of the video.
How to play HLS stream in HTML5 player Video.JS?
To play an HLS Stream in our video player using video.js, we need to first import the required package, which is 'videojs-contrib-hls'. Video-js contrib hls is already implemented in the latest versions of video.js and we just need to include it inside our code by linking it in the <script> tag.
Example
Consider the code below to add "'videojs-contrib-hls'' in our local project −
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojscontrib-hls.js"></script>
Once we've included the package required for playing HLS video, let's add our HLS source in the source tag with its mime type. The HLS stream files usually have .m3u8 extension at the end of the file. And the video mime type for the steams is "application/x-mpegURL".
Consider the code below to add an HLS Stream source in our video element −
<source src="https://www.tutorialspoint.com/videos/stream.m3u8" type="application/x-mpegURL" >
Example 1
So, the complete example of an HLS Stream video player is going to look like this −
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/sample720.m3u8" type="application/x-mpegURL"> </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
In the above example, you can notice that we've add our HLS stream in the source tag inside the video element. And in the <script> tag, we've also included the package 'videojs-contrib-hls', which is responsible for playing our HLS video stream in the web browser.
When you execute the above code, you'll see that a video player is created which plays the HLS stream video file and has a custom theme applied. We've also used some standard HTML5 and some video.js specific video options like controls, preload and fluid.
Note − Please make sure to add the correct path of your HLS steam in the source tag.
Now that we've understood how to make a basic HLS stream video player using video.js let's see how we can make this programmatically instead of adding a source tag.
Creating an HLS Video Player using Video.js Programmatically
In this section of the tutorial, we're going to again create a video player to play HLS Steram but this time, we're going to use video-js functions for the same.
First, we'll create a video.js player reference and will map it to a video element with the id as 'my-video'. Then we'll add the "src" to the created player with the link of HLS stream and its type.
Use the following code to create a player and add HLS Video stream source −
<script> var player = videojs('my-video'); player.src({ src: 'path/to/my/stream.m3u8', type: 'application/x-mpegURL' }); </script>
In the above code snippet, we've create a video player reference using video-js function to the video element with id = 'my-video'. And then we've added "src" attribute to the player use the "player.src" method. We've passed the source path to our HLS Stream file with extension m3u8 and then we've set the type of the files as 'application/x-mpegURL'.
Example 2
The complete working example of create an HLS Video player inside the <script> using video.js will be as follows −
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='{}' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js"></script> <script> var player = videojs('my-video'); player.src({ src: 'https://www.tutorialspoint.com/videos/sample720.m3u8', type: 'application/x-mpegURL' }); </script> </body> </html>
On executing the above example, we'll see a video player in our browser which will be playing our HLS Video Stream.
Note − Don't forget to update the source path of the HLS stream.
Conclusion
In this tutorial, we understood how to play an HLS Video stream in HTM5 video player using video.js. We also saw various methods of creating an HLS Stream Video player with the help of examples.
10K+ Views
