How to Play a m3u8 File with HTML5 Video Element

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
in this tutorial we'll look at how to play an m3u8 file video with HTML5 video element okay so I just have a simple HTML boilerplate is currently empty now if you want to use the video element and let's actually use this Source elements in there let's say you have some kind of um you know video dot mp4 file this will work out of the box without any issues or webm will also work however if you have the m3u8 extension or hls it will not work out of the box right so if you want to use this you're going to need some kind of external library and a very popular one now is called video.js so video.js is actually two parts it's actually a custom video player and I show you this on the on the on their home page right this just looks better than the default one that you get in the browser so you you may want to use this you know alone for the for the video player alone but these days it automatically also includes support for these types of files right so that's what we're going to use here we're going to include video.js we're going to set it up and I'll show you some examples of actually playing uh files and even live streaming with this player okay so they show you how to get started I mean you can find all of this on their website but I'll quickly walk you through here so I'm gonna use the CDN link so this is the CSS portion right CSS because this is a custom video player right you're gonna need some styling for that so that's the CSS part here I'm gonna include this here in the Hat and then let's see they also need there's there's also a JavaScript portion right because for the video player for example if I click on this icon here what they need to hook into the click event and they need to start playing the video right so they need JavaScript for that and the JavaScript actually also includes support at least since version 7. it automatically includes support for this type of file as well so I'm just going to link to the script to this to the JavaScript in here in the head as well now generally speaking it's a best practice if you're gonna do it in the head to use the defer attribute so that it doesn't block parsing the the rest of the HTML right so make sure you have mastered modern JavaScript I have a course in JavaScript it's a couple of hours it will benefit you for the rest of your career the link is in the description definitely check it out and and this is actually all you need to include right this will this is enough for both the video player as well as the support for this type of file right now we don't see anything so let's see how we can actually uh scaffold a simple example here so for the source I'm actually going to use an uh an actual video and there are some there are some example videos that some companies have made available so I'm going to use an example from Dolby right that's the URL here but you can see the extension is m3u8 and I'm also going to specify what type this is I'm going to say type and it's the application category and then X MPEG URL and almost finished here so then in the video uh opening tag I'm gonna specify a couple of attributes so I'm going to give it an ID of let's say my video I'm also going to give it a class maybe you want some styling or you want to hook into it differently we want to see the controls we're going to say preload as Auto and you can also just copy this from their example by the way so you don't have to run it from scratch but um this uh by doing it this way we can go through the individual attributes a little bit so let's see what else so this won't work the last thing that you actually need to include there are basically two ways to initialize this so if you just do it like this video JS is not invoked yet you could say so you can do it two ways you can do it in your JavaScript so you can write some custom JavaScript to initialize it or if you don't want to do that you can do it directly here in the in the HTML by using data setup with the options right right now we're not going to have any options so we're just going to leave this this is actually a Json string is what it should be we're going to leave that empty but we you do need to include this if you do it that way right I'll show you the other way of doing it but video.js needs to know the options basically right now we don't have any options but if we try this right so you can see we're playing a file now with this extension m3u8 right and this is a file that Dolby has made available you can find under example links on the internet but you can see it's pretty cool it's working right now and the video player looks much better than you know the the default that you can the box I mean in HTML with the HTML5 video element right you can see the captions right so you can set it to English and actually by default for some reason it says playing and that's that's the caption here I don't know why um but of course you can configure that separately right but you get a very nice video player out of the box and it has complete support for all of these formats that you probably want to use now Akamai also has an example link with live streaming actually so if I change this URL to another one this will actually show an example of live streaming which is pretty cool so let's see if you can see it says live here now and let's see if it actually works okay so you can see eventually this also works right so even live streaming I think this looks really cool um it's a bit slow on my computer perhaps um because this is just an example they probably don't have um they probably don't put this on a CDN or whatever so it's going to be a bit slower perhaps I'm also recording a video here so it may be a bit slow but um this is probably what you want to do now maybe you don't want to use this data set up um and actually let me just change it back to the previous file not live streaming so it's a bit faster okay and maybe you don't want to use this data setup attributes right so if I remove this it actually won't work anymore right so now you need to initialize it in a different way so you probably have your own custom script right let's actually do that I'm gonna say script Source I have a script file and I'm also going to use defer here and make sure it comes after the other one right so then the variables from this script are going to be available in here and defer actually respects the order all right so that's no problem here so I'll quickly create a script here I have to make sure you have mastered modern JavaScript really the most important skill that you can learn as a web developer or a software developer that has to work with the web right so what you can do here is you can wait for the page to have completely loaded right so Dom content loaded or you know window.onload and then when the event occurs we're going to fire this function right modern error function so what you could do here you can say video JS this is the variable or function right that we're going to get from this script and here it needs to know the ID of the video element and that's my video and then you can provide options right so all sorts of options available but this would be an alternative way of initializing all of this so now if we refresh it should work again right so now it also works again right so you can go to the API docs look around and see all the options that are available right so they have all sorts of options for autoplay and actually those are the the typical video options if video.js specific options are here so aspect ratio breakpoints full screen languages you could even have plugins um for example if you want to use YouTube or like some Vimeo and that you can actually use that here in video jazz in using their web player actually it doesn't have anything to do with this file format but you would use their video player and yeah you can look around but this would be a very basic example by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses from like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon
Info
Channel: ByteGrad
Views: 44,498
Rating: undefined out of 5
Keywords:
Id: eVKm12T0BPg
Channel Id: undefined
Length: 7min 50sec (470 seconds)
Published: Mon Dec 05 2022
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.