Video Player With HLS

foreign [Music] how to play video using hls  js this is the demo of what we are going   to do in this video here on the network  tab you can see a file named video.m3u8 and if you click this go to the response section  and you can see three quality options for the   video that is 480 720 and 1080. now these are the  three qualities that we have for the video and hls   js will automatically choose the quality according  to the network and the resolution of the screen   now if you play this you can see the quality  will change automatically first of all we have to   convert the video file that is the dot mp4 file to  a format that is supported by hls so here we are   going to convert it to dot m3u8 for that I have  created a project and uploaded it to this server   you can check the link I will give it on the  description this makes the task of converting   the video file to hls supported format easy you  simply have to click a button and it will convert   the file automatically you also have a progress  bar that will show the percentage of the task   so you can download it from here I will give the  link in the description I have downloaded it and   placed it inside xampp htdocs and inside that  I have extracted the zip file and kept it here   so if you don't have xampp install the latest  version of xampp you have to make sure you have   the PHP 8.1 and above now I have installed  the latest version of Sam you can see here start the xampp Apache now you can go to  localhost slash the folder name so let's go to   localhost slash the folder name so our project  has loaded now if you click this convert MP4 to   m3u8 it will start working because I have given a  demo mp4 file inside the folder so it will start   working automatically before that you have to  change the mp4 file to the video that you need   so let's open this inside a vs code so I have  opened this inside vs code you can see the   file index.html and hls create.php now here you  can see you have to change the video file here   here I have given the video inside video  folder video.mp4 so you can see that inside   the video video dot MP4 and this is the video  okay now we are going to convert this video   so and you can choose the quality options  here here I have given the list of qualities   so and here you have to choose the needed quality  options I have chosen three quality options that   is 480 720 and 1080p so you can add more from  this list now this is the output file you can   I have given it the folder output then the file  name is video.m38 don't change the video extension   keep it same you can change the video name  okay that's all now let's try running this   you can change the video here I'm not  changing it so let's click convert MP4 to m3u8 now you can see the progress bar has start moving  if your progress bar is not moving simply go to   the network tab you can see the log file has been  loading continuously so click this and check the   response part if it is continuously showing zero  that means the log file has been cached so simply   open this inside a new tab and reload this and  then you can check the progress again that uh   this happens because of the caching of that file  so that's all but the task continues behind the   background just the progress bar doesn't show up  that's all so we have converted the file properly   and you can see the conversion as completed 100  percentage now go to the folder you can see I have   the folder output inside that you are having so  many files let's view it okay you can see so many   files has been created from that single video file  okay now this is our main file let's go to vs code here you can see the output now this is the  file now you can see we are having three   video qualities as we have shown before  and here you can see the chunks of videos   see we are having four chunks for the  480p video and for for the 720 and for the   1080 so let's try running this we have  converted the video file now we have to   copy this chunks and paste it to our assets  folder inside the next project assets folder now let's select all the files  you need all the files okay now you can see I have created a new project  now this is for the player so we'll be playing   this chunks of video here okay I have pasted  all the videos inside the assets slash videos   we can see this okay hope you understand now  I am having the index.html file on the root   now we have to add the hls JS  Library so go to the browser I will give the link for this  library in the description   scroll down and you can see the JavaScript copy this you can copy it from here to here okay now paste it here you can remove this comment now close the script tag so here you can see a test URL has  been given you have to change it   to the assets slash videos slash video  dot m3u8 this is the file okay so now we have changed the video URL now I'll  explain the code here you can see we have   added the JavaScript library for hls js here  we are having a video tag with the ID video   we have to give the controls also so controls  and you can also specify a width for this okay that's all now we have added the video tag  here inside the script tag you can see that we are   fetching the element by ID that is video IDs video  now you are storing it inside the variable video   here on the video SRC we are having the link to  the video file that is the converted video file   okay and inside this if condition you can see if  is supported if hls is supported this will run   okay if not you can add an else part and load  maybe load dot MP4 video file or Etc so we are   not going to do that we are only using hls so you  can see HLS we are creating a new variable for the   HLS class and we are loading the source now this  is the URL of the video now we are attaching it   to the video element this is the variable of  the video element we are attaching the media   to the video element that's all and we have  completed the implementation now let's run this so here you can see we have  opened this inside the browser   when you play this you can  see the video has been playing you can see that the quality of  the video changes according to the   Network okay and the resolution of the screen also  so you can see the download option is not there and if you check the network tab let's refresh this page you can see  the chunks of videos are loading see   now if you are having a very long video you can  see this properly you can see the chunks loading   one by one one after another slowly like that  since we are having a very short video it gets   loaded very quickly that's all that's how hls js  plays the video this makes it smooth and faster   so hope you understand how to implement this if  you are having any doubt you can leave a comment   I will definitely respond to all the comments you  can also join our community we are having a great   Community you can get response there for your  doubts etc if you need the complete source code   of this project you can check the URL I will give  this URL in the description here you can see the   video player option have created a video player  which looks like this I will show you the images   see have created a video player given it a skin  design etc and also added a quality option okay   quality switch option also I will explain this  in next video but this source code is having that   already implemented if you want you can download  this okay now this is the one which you need to   convert the video file okay you can download this  to convert it this is this one okay this is the   demo of this one I will give all the links for  this in the description you can download it now   now that's all hope you understand how to  implement this so let's see you on the next one

Channel: Codes Easy

Views: 13,993

Keywords: hls js player, Hls player, Video Player With HLS, how to play hls video in html5, hls js tutorial, hls video player, hls video player html5, hls playback, m3u8 video player, videojs hls, hls tutorial, mp4 to m3u8, Hls streaming server open source, Hls streaming, http live streaming, hls streaming server, codeseasy, codes easy, m3u8 player, ffmpeg mp4 to m3u8, video player, adaptive streaming, play video in html, prevent video download, blob videos, video tag

Id: d0UWgSAYTeA

Length: 11min 35sec (695 seconds)

Published: Sun Oct 16 2022