 Hello again, it's entry number two this time. Let's talk about videos. So we're not even gonna look at any code So if that's boring to you, I guess you can stop watching now But I wouldn't because this is actually really Kind of a fascinating underpinning Which I imagine will come out in various ways throughout the build but nonetheless, it's worth talking about now Which is how do you actually? Do video playback in modern terms simple version you take a video element with a source equals something dot mp4 or dot Marvel whatever whatever Container codec combo works right and you can have Multiple sources inside. It's fair enough. You can do that More modern versions use something called MSE apparently which is stands for media source extensions Think yes, that sounds about right the idea is rather than giving the video element a File a link to a source like you would with an image or even an audio element or something like that What you do is you have a buffer underneath so you attach a buffer to the video element and then you start Filling in that buffer yourself Cool, so you kind of maybe X HR in each individual chunk so that you can start playing the video quickly you get you know Your video in chunks Fetch X HR whatever works and you build up that buffer and the player Video player plays that video and everybody's happy So that's like the next step up Then there's another step up above that which is a thing called dash which is dynamic adaptive streaming over HTTP. I Don't know whether they named it dash Before or after they went let's call it dash. What does it sound for? I don't know? Dynamic adaptive Sugar-filled helium. No, that's not gonna work However, they did it dash is the idea that instead of one video file That is say like a 1080p video you have different quality versions of say your video and your audio and You want to swap depending on what the user's bandwidth is looking like so if they're on a low bandwidth situation Then you want to adapt to a lower quality video to just keep them going and this dovetails into MSE because you've got this buffer that you're filling well Why not fill that buffer with a lower quality version when it makes sense to do so or a higher quality version when that makes Sense to do that. So you're using dash to kind of swap Between qualities and you're filling that buffer in that way So that's that's MSE and dash in a very very very short space of time And there's probably about as well as I understand them now in order to get your video into that format There are a bunch of ways you can do it But there's normally something like ffmpeg is used to gonna be used to take the big video and turn it into all the different Quality variations that you need all those different. I think they're called representations or adaptations as anyway representations, I think is what it is and Then you have There's there's a bunch of you know tools that you can use the one. I've been using is called the shaka package Which ties into the shaka player, which I'll talk about some of the point but the shaka package you give it all the different versions of your video and It creates this manifest that has like how much bandwidth each one needs and what size it is is it like 1280 by 720 or 1920 by 1080 and What codecs it's using all that kind of stuff So it makes this big manifest that is a dash manifest that you can hand over to a dash compatible player So that's all good. That works on Believe it's chrome. I think Firefox desktop Safari. I Make that distinction because it matters Chrome Firefox desktop Safari. I Don't remember how edge is I'll have to look that one up Or you can look it up yourself because I mean that's how the internet works and Then on the mobile Safari side things are a little different. There's a thing called HLS, which I can't remember What that stands for? There with me. I'm just going to Google it. Mm-hmm HTTP live streaming effortless, you see And it's an alternative way of Splitting down the big mp4 or Whatever you've got Into different chunks that you can then swap between and in so in some ways It's sort of analogous to dash because you have these different versions of the file So you've started with your you know big HD video and you split it down to different qualities And then the you make an HLS manifest and there are tools that you can get that will segment the file the media file and make a playlist of all these different variations and all that kind of stuff and then You end up at the end of this instead of a dash manifest you end up with an m3 u8 Manifest it's a playlist file which you can on mobile Safari You just say video source equals and then you give it that playlist file This m3 u8 playlist file and it will do the rest So that's the kind of video on demand way of doing it I think it's slightly different again if you do live streaming. I haven't even looked at live streaming yet So bear with me and I haven't even looked at things like encrypted media All things for future stuff right now. I've been concentrating on I have a video What on earth do I need to do to this video to make it play? So there you go So there's there's the MSE but really dash and HLS dash and HLS seem to be the two Things that I'm going to be looking at Hopefully making them automatically swap between each whichever one bent, you know depending on support and I guess that's that so Stick with me in the next Episode I think I'm going to show you Around some of the prototypes I've been building Because those have been quite interesting to build as well to try out some of these things I should show you I'll show you the manifests Yes, I will show you like the the dash and the HLS manifests loads of stuff. It's there's so much That we can talk about if you speaking of which speaking of which if there's things that you want me to cover Don't forget to drop those in the comments everybody who's been commenting so far. Thank you It's lovely to have your your input and your feedback and I will see you in the next episode Hey folks, thanks for watching Don't forget that there is more content that you can find kind of over here ish and if you want to subscribe There's probably a button. Oh, maybe there maybe somewhere around there click that if you've not done that brilliant