December 11th, 2024 × #streaming#video#encoding
Streaming Video in 2025
In this episode Wes and Scott discuss video streaming in 2025 - how HLS streaming works, transcoding and hosting video files, CDNs, player libraries like MediaChrome, and various video platform options.
- HLS video streaming explained
- M3U8 files explained
- Transcoding video with FFmpeg
- Orchestrating FFmpeg with JavaScript
- Video encoding queues
- YouTube video encoding
- Hosting video chunks
- CDNs for video delivery
- Video player libraries
- MediaChrome video player
- Cloudflare Stream
- Cloudinary for video
- Bitmovin video platform
- Live video streaming
Transcript
Wes Bos
Welcome to Syntax. Today, I got an episode for you on streaming video in 2025, both rolling your own streaming video, how how that works, as well as talking about a bunch of services that will help you out with it. My name is Wes Bos. I'm a developer from Node, streams a lot of video. With the as always JS also someone who streams a lot of video, Scott Tolinski. How are you doing today, Scott? Hey, man.
Scott Tolinski
Doing great. You know what? I it is definitely a deep well that I have traveled many times before, but the landscape definitely has changed. So I'm really stoked to talk about this in general, just beyond the tech and, practically, what can you do in in 2024
Wes Bos
and beyond Wes let's just say 2025. 2025. Yeah. Let's face it. We're there already, which that's crazy. Right? So if you are gonna be rolling your own, you're gonna need Sentry because you're gonna be hitting your fair share of bugs. I know we run FFmpeg in a WASM worker in serverless functions, and we've hit our fair share of oddities that have have popped up there. And and Sentry has been pivotal in figuring out why those things don't work. So check it out. Sanity Scott I o forward slash syntax.
Scott Tolinski
Yes. Absolutely pivotal.
Scott Tolinski
So let's get into it. 1st and foremost, streaming video.
Scott Tolinski
You know, in the past, in olden days of web, you couldn't use anything other than Flash to play video.
Scott Tolinski
Then we got the video element for HTML.
Scott Tolinski
And the way people were primarily doing it at the time on a non, like, large scale, like, if you were just having video on your site, what you would do is you would encode a few different versions of your video.
Scott Tolinski
1 JS like, man, I even forgot o g v o g g format. Awful. Yeah. O g v and whatever. Firefox. So all the different browsers had their own different formats. You had to ship all those different formats to everyone.
Scott Tolinski
Then, you know, YouTube revolution, all that stuff, video streaming just kind of became the norm. And, really, you wonder, like, well, why can't every website including mine do video streaming? And the the answer is really that you can. So here's how video streaming works. It's a a format called HLS, which stands for HTTP live streaming.
HLS video streaming explained
Scott Tolinski
If you've ever seen a dotm3u8 extension, then you have seen what could be considered a playlist for chunks of video.
Scott Tolinski
So if you've ever I I Node, I I don't wanna put myself out here too much, but if I was streaming hockey games that were not in my my area, and I'm not gonna say legally, but I was just streaming them, there was actually a website that would just post all of the NHL apps m three eight u's, and you would just copy those and paste it into VLC.
Scott Tolinski
Because the m three eight u is not a media file. I think that is something that is often misconstrued by people who don't do video streaming. They see, oh, wait. I'm I'm loading a video. It's an m three eight u. I'm gonna grab that m three eight u. I'm gonna convert it.
Scott Tolinski
M three u eight. Yes. Oh, dyslexia.
Scott Tolinski
Me u eight. Yes. M three u eight. I'm just gonna I'm just gonna grab that and convert it. You can't. It's a it's a playlist with chunks inside of it. And, again, other players such as VLC or anything can read this just like an HTTP address.
Wes Bos
It's just text. Right? It's just point it's like an RSS feed. It's just pointing to where the pieces are and describing the pieces inside of it. It's Winamp.
M3U8 files explained
Scott Tolinski
You load up Winamp, you got a playlist. Do you remember that?
Wes Bos
Yes. Oh, yeah. For sure. Winamp was, actually, the we're gonna be talking about MediaChrome, which is the web component for playing stuff that you can skin any way you want. And there is a Winamp skin for MediaChrome, which is, full circle.
Scott Tolinski
That's wonderful.
Wes Bos
So if you want to build your own m three u eight file, you need to transcode your video into multiple versions, meaning that you have to first chunk up the video into 2 to 4, sometimes longer second chunks.
Wes Bos
And, usually, they those are dotts files, which drives me nuts because dotts is also TypeScript. And if you search for video files on your on Mac Finder, it shows you TypeScript files.
Transcoding video with FFmpeg
Wes Bos
And those chunks are you generally will take like, let's say you take a 4 k video that's a minute long. Right? Mhmm. It will convert it into 2 to 4 second long chunks, and each of those chunks will often it's not always the case, but often those chunks will have multiple resolutions and multiple bit rates. So you'll probably have a 4 k one with a specific bit rate, and you'll have an, 10 80 p one with a specific bit rate and and so on for however many versions you wanna be able to offer the people that are are visiting. And resolution and bit rate is kind of a funky thing because resolution doesn't entirely define the quality of the video, the the bit rate of the video also, and and and the the codec and all that stuff does as well. But, generally, with my, with, like, coding videos, you wanna you don't necessarily care about the resolution so much, but you care a lot about the bit rate because when you start to go down in bit rate, things start to get fuzzy, and and the thing that goes fuzzy first is text. Yeah. You know, you might you definitely might notice this.
Scott Tolinski
Around, like, details and edges, things get kind of, like, blocky and digital looking. And it isn't, like you said, that the resolution is bad. It's just that there's not enough bits in in the video itself.
Wes Bos
You know, I guess this is more of a compression thing, but I remember when I used to download, like, Family Guy in the Simpsons, I was always, like, marveling how much smaller the file sizes
Scott Tolinski
were Yeah. Than, like like, regular TV shows. And it's because, like, the colors in them were were much simpler, and they compress a lot more. Yeah. Totally. Yeah. Stuff's not moving. Just big blocks of color. And you'll see it too. Especially, you'll see that if you dial down the compression or or or you dial down the bit rate with compression or otherwise.
Scott Tolinski
And you'll see colors that should be solid potentially waver a little bit and be, like, 1 or 2 colors that are kind of blocky, if not the same, especially around, like, shadows and stuff like that.
Wes Bos
So to create these m three u eight files JS as well as the chunks themselves, you can the tool that everybody uses is called FFmpeg.
Wes Bos
FFmpeg is this just wild open source project that, like, many $1,000,000,000 companies are built on top of. But there is a flag for it that is HLS play playlist type, VOD, which means video on demand. Mhmm. And that will chunk it into into many ones because you can also have a m three u eight for live streaming, which is Scott's hockey games, and that will output all of the sizes for you, as well. Sorry. That will only output 1 size. You have to run it multiple times and then concatenate them all into a single m three u eight file. I wrote a 120 line transcode TypeScript script just because scripting in bash is painful.
Wes Bos
I much rather I'm not doing the transcoding in JavaScript, but I'm using JavaScript just to sorta script it, which is good.
Orchestrating FFmpeg with JavaScript
Wes Bos
Orchestrate. There you go. Yeah.
Scott Tolinski
Yeah. And you'll frequently see this. If you're paying a service to do this, there's there's companies like Bitmoven that, like, primarily ingest or AWS SMVOD flows we'll talk about. But the way that this typically works is that these are being done in just kind of like a queue. I'm gonna upload this thing, and now here's, like, a queue of all of the different, different resolutions and versions that my Mhmm. Transcoding
Video encoding queues
Wes Bos
process needs to take care of.
Wes Bos
That's why you upload a video to YouTube. It takes so much longer to, like, process than if you're uploading them to, like like, I upload a TikTok and a YouTube short at the same time, and the TikTok is ready in, like, 2 seconds. Mhmm. And the the YouTube takes forever, and it's because they're making I don't know, how many how many possible copies. Do you wanna know how many?
Scott Tolinski
Yes. I would love to know. Well, it's different for, like, every video, really. Maybe not every video. There's definitely a rhyme and a reason to it. But if you use YouTube DL, YouTube DL, a great project for, downloading videos off of YouTube. If you've used YouTube DL, there is a command, and I'm trying to see what it is for options, that just simply lists all of the available versions.
Scott Tolinski
And there is a lot in there. There's a lot of versions, more than you might expect.
Wes Bos
That's interesting. By the way, are you not using YTDLP yet?
YouTube video encoding
Scott Tolinski
I am not using YTDLP
Wes Bos
yet. Project got kicked off of YouTube, YouTube DL, and then they came back.
Wes Bos
I forget why, but now it's it's under YTDLP.
Scott Tolinski
Oh, looks like it is still maintained. I used to use YouTube DL or YouTube, essentially, as my video compression software to save me time for level up tutorials. It's like It it so what I would do is, yeah, you can drop a whole folder into YouTube. So I would finish my course. I would export it as 4 k. I would drop it into YouTube. I would put it into a playlist. And then once it was done processing, I would tell YouTube DL, download that whole playlist at the highest resolution possible. And next thing you know, I have super nicely compressed files that I can zip up and then give those to people to download. Worked really well. They're so good at it. Like, YouTube has its own They're the best. Yeah. Algorithms for doing this type of thing. But, also,
Wes Bos
you could probably use this just to transcode and then download the chunks yourself. You know? Yeah. I bet. And then some some transcoding services as Wes, like Mux, they'll just do it on demand as Wes, where you can upload a file and you can immediately start streaming it. They must have some special logic around, like, doing it in parallel, because if you have I have, like, a m one Mac. It's pretty fast. I kinda want the m four now that for for some of this. But, like, an 8 minute video will take 5 minutes to to chop up into
Scott Tolinski
6 or 7 different resolutions. Right? Yeah. So The m 4, Node, I don't know if you saw this on the m 4 distraction tip. The screens are not glossy, shiny anymore. Yeah. That's I want that.
Wes Bos
Yeah. I want that as well. That that seems pretty sweet. I can't justify I just can't fathom No. Unless you're doing, like, FFmpeg. And and even then, I'm I'm sure it's not that big of a jump. But, like, what else are you doing that you need it that fast? You know? I'll tell you what.
Scott Tolinski
Masking in DaVinci Resolve, especially, like, automated masking Yeah.
Scott Tolinski
Yeah. It, like, really, the the slowest I've ever seen my computer run. And this computer, like, does not struggle. I tried to do some magic masking of just a little bit, and my computer was just like, hold up here. I I think I'm about to crash. And it's too it was just, like, way too much for it. And I've never really had that experience on this computer. And Yeah. It's a bummer because the magic masking stuff is so cool. I wish I could, actually use it in a regular capacity.
Wes Bos
But do you you saw that somebody got a m four, and it's it's much better on there? Because, like, the No. I'm not. Show that. It's, like, twice as fast. No. Oh, yeah. See it. Yeah. I'm waiting for the m five.
Scott Tolinski
Yeah. Yeah. I think I'm gonna gonna hold out too. That's I've decided to wait till the m five. I I've made that because I did see that they might be making the little notch camera thing much, much smaller.
Scott Tolinski
And so that's a a motivation for me to wait.
Wes Bos
Alright. That's good. Alright. So back to to video.
Wes Bos
Wes talked about using FFmpeg to transcode your video.
Wes Bos
It's it's making what are called variants. Right? The the different versions. And many players will be able to adjust the bandwidth that is needed. So that's sometimes sometimes when you start watching a video, you'll see that it's it's, like, a little bit blurry for the 1st 2 seconds, and then it it gets much better. And what's happening there is it's it's testing your, it gave you, like, a Wes for the 1st 2 seconds, and it goes, oh, you downloaded that pretty fast. You got some fast Internet there. So then it goes, okay. We're gonna bump you up to four k, and then and then you get the the better version of that.
Scott Tolinski
Yes. And then, again, if it's struggling, bump you back down. I think just about everyone has experienced this, especially Wes, faster Internet wasn't as available as it is today.
Scott Tolinski
Definitely was like a major thing to have video all of a sudden go super blocky all the time. And and maybe that, you know, a lot of people are still experiencing that.
Scott Tolinski
There's also another really cool thing that you you because, right, you have a playlist, you have chunks.
Scott Tolinski
And this is cool from a technical perspective for me because I I hate this in real life. But dynamic ad insertion, that's how it works. It's essentially, they're splicing a message, and there's a specific format for this type of message. We're not getting in the technicals here. But they splice in a message into that stream that then chooses to load the ad before going back to the m m three u eight playlist. So I thought that was super interesting JS because we're dealing in chunks here, it makes it really easy to insert and add in between chunks. Yeah. You can simply just swap out one of those chunks with a a different one. Because if you look at the m
Wes Bos
three u eight file, what it does is it lists the resolutions and bitrates, and then those point to additional m three u eight files that have the chunks in them for each of the resolution bitrate combinations.
Wes Bos
And and then they will then point towards a actual file that lives somewhere, which is a dot t s file. So you simply are just just swapping that sucker out with something that is dynamic on request.
Scott Tolinski
Yeah. Totally.
Wes Bos
So let's talk about bandwidth and and hosting. So once you actually have these dotts chunks, like like, where do they go? Right? And this actually came upon a a question that we had from from well, it it kinda came 2 ways. Right? Like, first of all, I figured out that you can host video files on Cloudflare r two, and the bandwidth on Cloudflare r two is free.
Wes Bos
There's no bandwidth cost. You simply just hold. You pay to hold them. So the conversation, I was like, I was like, can you just use this for streaming video? I know Cloudflare has a stream product. I know that Yeah. There's mux and whatever. And I'm not saying I'm gonna do this because this is is kinda hard. Although, Aaron Francis and and Steve, Tenuto, they actually are doing this. They're doing exactly what I was asking, whether they're just hosting it on Cloudflare themselves, and they're processing it and whatnot.
Wes Bos
So what needs to happen is you need to host these chunks somewhere.
Hosting video chunks
Wes Bos
Right? And you you need to be able to download them and stream them in as as they are needed.
Wes Bos
And where do you put big files? Well, you can put them on Amazon Wes three. You can put them on Cloudflare r two. Right? Like, all of the big, infrastructure giants out there have products that will allow you to simply store files or store,
Scott Tolinski
they call it, blob storage. Right? Just store data, raw data. I will say that if you are choosing to go down this route of storing these blobs yourself or the these you have to be very organized with your with your folder structure because it can get out of hand. You have all these different versions. You have all these different chunks of videos. You have different videos individually.
Scott Tolinski
You should look up exactly, like, a good structure to do that before you just choose to use it. Database for these types of things because
Wes Bos
JS as much as you can download like, as much as you can, like, save a m three u eight file, you you really have to be able to generate those things dynamically, especially if you're trying to limit access control.
Scott Tolinski
Let me tell you the workflow. So this is the Amazon suggested workflow if you were doing this by hand. You have 1 bucket for your source.
Scott Tolinski
So you have a source bucket, then you have a Lambda function that looks into that bucket, and then it sends it to media convert.
Scott Tolinski
That converts it and then puts it into another bucket.
Scott Tolinski
After it puts it into the other bucket, it writes to a database where the locations for those files are, and then it puts it all behind a CDN. So, yeah, you in this case, you need a bucket for the source. You need a bucket for the destination. You need Mhmm. A process to convert them. You need a CDN, and then you need a database to actually store where they're at. Unless if yeah. It's, of course, if you're doing a whole upload, kind of process.
Wes Bos
Yeah. If your user so that FFmpeg Node is kinda interesting because if you're just doing something like I'm doing, which is you have courses.
Wes Bos
And every time you have a a course or update a video, just run the script on your computer and then and then upload the output to it. But if you're having users upload it, like, for example, Blue Sky, they use Bunny, CDN. They don't use Bunny Stream. That's a product.
Wes Bos
But they they do this. You have to upload the user's thing, and then you gotta ingest it, and you gotta convert it, and then you gotta put the all the pieces somewhere.
Wes Bos
Let's talk about specifically Cloudflare, because I think that this is what got me going down this whole rabbit hole, which is Bandwidth on Cloudflare is free.
Wes Bos
According to their terms of service, they even updated it to say this, as long as you are using another product on Cloudflare to store these, so Cloudflare r two is a place to store them, It is allowed. Even though they have a competing stream product, you may put them in a Cloudflare r two product, and then you may put the Cloudflare CDN in front of that because that's the 2nd step to this is Mhmm. You can put your files in a bucket somewhere, but that's not going to be fast across the world. You put them in in in Virginia, and your users in Germany or Australia are gonna have a little bit of slow they're gonna have slow streaming. Right? So what you can do is you need you need to put those files on servers around the world.
Wes Bos
And Cloudflare's CDN sits in front of your r two bucket, and that, again, that is allowed via the terms of service.
CDNs for video delivery
Wes Bos
I looked into it, and and then that will be available around the globe in their different data centers.
Wes Bos
Yeah.
Wes Bos
Man.
Wes Bos
Let's talk about the actual cost behind these types of things because, first of all, I'll point to a Twitter thread where, Steve, Steve and Aaron, they have a bunch of courses as well. They did 15 terabytes of 4 k video for $2.18.
Wes Bos
You might be thinking, how is that possible? So let's let's break it down into to how how these things work. And we did do a whole show on hosting big zips and whatnot, but this is just specifically video. So on Cloudflare, let's say you have a course with 30 15 minute videos. Right? That's 7 and a half hours of content, that needs to be uploaded.
Wes Bos
That 7 and a half hours of content is probably going to be about 16 gigs of files once you have, chopped it up into all those multiple pieces and for multiple resolutions. It probably Wes if you only do, like, 4 k, 10 80, 7 Wes. But if you wanna go all the way down to, like, 3 60, it's gonna be around that. Yeah. Now you have so you have 16 gigs of video.
Wes Bos
R 2, which is Cloudflare's storage product, charges you 1.5¢ per gig per month, meaning that just to simply hold those files, it's gonna cost about 25¢ a month, or, about $3 a year to just hold those. And and that's not a lot if you have a single course. It is a lot if you have, like, your your blue sky or Twitter, and people are uploading
Scott Tolinski
that much every minute to you. I I wonder how that compares to Mux, which for storage is Well 0.003¢ or $0.003, so 0.3¢ per minute.
Wes Bos
Yes.
Wes Bos
That's I really like this about Mux because they I I did the math on Mux as well because Mux takes the hard part, which is trying to do all this, like, crazy math. I don't know how many gigs I'm gonna be using. You know? I don't know how many people are gonna be watching.
Wes Bos
So if you take that 30, 15 minute videos, 7 and a half hours of content, Mux does it per minute, so that's gonna cost you about a buck 35 a month to store, or 16 year $16 a year to hold it. So, really, it's it's significantly more, but really not that much if you're thinking about seven and a half hours of content.
Scott Tolinski
I can give you some real data here.
Scott Tolinski
LevelUp tutorials has 6,000, minutes uploaded to Mux. So let me do that math here.
Scott Tolinski
Yeah. It is for 6000 minutes of video, which let me tell you JS a lot of courses of video. A 100 hours.
Scott Tolinski
A 100 hours of video.
Scott Tolinski
It cost me $18 to store that.
Scott Tolinski
And then a month. And then because all of these videos have been up for a long time, they're not being encoded very much. So it only cost me a dollar this last month to encode all of my videos because they've already been encoded and stored and encodes as you go, and then $13 for minutes streamed. So $33 for the entire course base for Vercel up tutorials
Wes Bos
for whatever your for my database. Yeah.
Scott Tolinski
I know. It's it's it's really super reasonable. And let me tell you why it's so good. You don't gotta worry about storage or ingest. You don't have to worry about saving things, database. You upload it, and then you just get the m three u eight file, and you just plop that in your player. To go. Yeah. Yeah. So,
Wes Bos
the other thing, when people watch it, it costs you 5¢ per hour of video watched. So if somebody watches that entire 7 and a half hour course and this is kinda how I how I look at it. Right? My courses are anywhere from 7 hours to 40 hours.
Wes Bos
And you'll look at it, and it that's if it's a 7 and a half hour course, it's gonna cost you 43¢ if they watch every single minute of it and and don't skip ahead or whatever.
Wes Bos
So 43¢ for somebody to watch 7 and a half hours of video.
Wes Bos
But then, like, if you think about, like like like, Netflix, you know, people watch 3 hours a day. Mhmm.
Wes Bos
That's 90 hours a month, and it costs you, what, 5 5¢ per hour, $4.50 just in bandwidth.
Wes Bos
So it's still still less, but but not nothing. Yeah. But that's just a kind of an idea of of that. And the the other thing that we're not talking about here is that if you are not running the FFmpeg on your own computer, you have to now pay for a server to to to run that compute, And and that server would be easy. It depends on, obviously, how much video you have, but 10, 15, up to 100 and 100 of dollars a month for these really GPU heavy servers that can can do it very quickly. So, again, that's another thing. It doesn't matter. It doesn't need to be much faster or not. Yeah. And Amazon,
Scott Tolinski
AWS has, like, a service specifically for this, elemental media convert. Right? So, like, they have a service that's completely designed just to handle media conversion at this at this scale. I and I did the math on it. It's much more expensive than Mux is. Is it? Yeah. Plus, I tried to do the whole Amazon thing, but it it felt very rickety. And it's mostly because I'm an AWS total noob, in terms of all the services. So when you start to connect, like, 8 different services together, I'm like, oh, boy. Too much for me. Yeah. Well, you should look at the, the graphic of
Wes Bos
how Amazon suggests you do video on demand. Oh, yeah. And it's like, yeah. Upload it to s 3, put it in a Lambda, then throw it to the BDA convert, then put that on CloudWatch, then that goes to EventBridge, then that goes in front of CloudFront as a CSS, and then, like, whoo. And then you have you have costs for all of those things as well, which probably at a mega like, you're a you are a CBS.
Wes Bos
You could pay people to figure that out, but Totally.
Scott Tolinski
Not for for regular folk. Totally. Yeah. That's where I landed on. It's like, this is not for me.
Scott Tolinski
The the solo video guy trying to get his website Mhmm. Working nice.
Wes Bos
So let's talk about actual players. So you cannot take a m three u eight and just pipe it into a video element, because that like, HTTP live streaming is not a web spec, So there's nothing in the browser that can do it. You need, a library to be able to, to parse it. And I I believe that's HLS JS is the the big one. That's the big one. That's the one everybody uses. HLS is actually, built into Safari,
Scott Tolinski
but it has been since version 6. So this is HLS is an Apple technology. So that makes sense that they would have it in there. But, yeah, you have to use HLS and you've always had to use HLS, JS. So that that is the one. And in the past, there's been, like, a 100 different playing player libraries. In fact, man, I I could I could spend a whole episode on different Yeah. Remember JW Player or JW Player Plyr, p l y r, player Scott JS, I think.
Video player libraries
Scott Tolinski
Yeah. There there has I could do a whole episode on video players I have used, loved and lost. How about that? Video players I've loved and lost.
Wes Bos
They're all so painful. So the the one that the one that I've been using for the last couple of projects is Mediacrome, and that's from Mux.
Wes Bos
And it's a web component, and it just freaking works. And it like, you just it's it's like HTML.
Wes Bos
You import the library. That's it. And you run no more JavaScript past that. You simply just use the tags that you need, and it will it will do things like you can have switchers. You can do AirPlay.
Wes Bos
You can do thumbnail preview, like, pretty much anything you can think of. There's either a plug in for it or it's built in, and you simply just use the, web component tags. And it's smart enough to, like, look up for the parent media source and and communicate with it. And it's such a great experience. Yes. It is. And it honestly, MediaChrome
Scott Tolinski
is not only my favorite player by a long shot.
MediaChrome video player
Scott Tolinski
It's probably my favorite web component by a long shot. You know, one of the big things that I have noticed with playing a video player library specifically, like I said, I've used so many of them, is that so many of them are maintained by a single person somewhere.
Scott Tolinski
And there are endless edge cases with a video player, and you get into a situation where you want, let's say, Chromecast.
Scott Tolinski
And they're like, oh, yeah. Chromecast is broken in these browsers. I'll get around to it at some point. And and, like, then you're you're that's that's what you have to deal with. What am I gonna get in there? I'm gonna submit PRs to this complex video player, project. And I've never had that with, MediaChrome.
Scott Tolinski
It just works. It works super well. It does everything that it's supposed to do, and I I don't have any bugs with it. You have, like, full control over all the CSS
Wes Bos
over everything. You Node, it's not like a
Scott Tolinski
and it's not like a iframe embed or anything like that. It just it works. And it work we use it on syntax websites. It's not just video as well. Right? It works for audio. We use it just for audio. Yeah. I didn't know this. You can load YouTube up in it now. You can load Wistia or Vimeo up in it. So I didn't know Node. Or Spotify audio. There's a Spotify audio element.
Wes Bos
That's interesting. You can embed a Spotify right in the page. Yeah. It's pretty cool. It's it's I I have a talk coming up. I'm like, you don't have to like writing web components, but you certainly are going to love using them.
Wes Bos
And it just somebody has done the work of building such a flexible player. Huge project.
Wes Bos
And it works in React and Svelte and, vanilla JavaScript. It works in HTML.
Wes Bos
You know? You don't even need a framework for it. So, yeah, it's just a a really nice, nice experience.
Scott Tolinski
Yeah. It takes care of all the little things. And so, definitely, if I were saying anything, Wes, MediaChrome.
Scott Tolinski
Next 1, CDN. Like, what do you do about a CDN? I've I've done the Amazon route putting CloudFront in front of video before.
Scott Tolinski
Obviously, if you're hosting it on CloudFlare, that's not something you need to worry about. So you had mentioned that there is a, like, specific video streaming service that Cloudflare has. And you know what? It used to be iffy. It's called Cloudflare Stream. And it was only iffy because it was like you you drag things into the UI, you copied and paste or whatever. The API was, like, nonexistent.
Cloudflare Stream
Scott Tolinski
But now I see that there is, like, a full API.
Scott Tolinski
The pricing seems pretty decent, and you can do things like control access by location.
Scott Tolinski
You can have user generated.
Wes Bos
So It still doesn't do 4 k, though. So it's Node do 4 k. Not worth your your time. Doesn't do 4 k, really. And I I think part of that is because they, again, they bill based on, minutes of video streamed. So if everyone starts using 4 k, I don't even know what the the whole but, like, we talked about this probably 4 years ago on the podcast. You Node? Now it doesn't support 4 k, and like, oh, maybe soon, but I don't I don't know what the the plan is there. They do have WebRTC support. Okay. I do wanna say really quickly about the Cloudflare r two.
Wes Bos
Cloudflare r two by itself is still in a bucket in 1 place in the world, and it is not CDNized.
Wes Bos
Even if you have Cloudflare orange cloud in front of it, it's still not going to, be CDNized. You have to set up either rules in a worker, or you have to set up some rules based on bucket names to explicitly turn on CDN caching around the world for those your video hunks. For your hunks. Yeah. For your hunks. I did just find the FAQ.
Scott Tolinski
Cloudflare, we use different adaptive streaming levels from 3 60 p to 10 80 p. Yes.
Scott Tolinski
They don't even say anything about 4 k. Seems wild that
Wes Bos
it's still not a thing. Like, I could understand 4 years ago when their initial product, but
Scott Tolinski
nothing.
Scott Tolinski
To me, if YouTube supports it, you gotta support it in your in your product. I agree. And, like, I watch YouTube in 4 k just sitting on my computer. I watch my YouTube in 4 k in VR.
Scott Tolinski
And
Wes Bos
there you go. Yeah. Just trying to win here. Yeah. Access control. Basically, when you want to provide a link to something that is in a bucket, whether it's s 3 or r 2 or any of these things, they all they all follow the same Amazon spec. It's it's actually kinda funny. If you if you create an access link on Cloudflare r two, it has, like, dash a m zed. Like, it it uses Amazon in the URL because Amazon made the spec. So you either have to do that, or you can just leave the files open and then lock down access to the m three u eight. It really depends on if you think people are going to be, stealing your video or not. In a lot of cases, even in, like, big TV stations, it's not worth the the hassle and the extra compute to to check for access that they just say. Like, if you can't access our m three u eight, then it's not a big
Scott Tolinski
deal. Yeah. I will tell you that, people streaming hockey games, they they do protect those m three u eights. They don't want anybody just grabbing their stream that they've gotten and putting it on an iframe, because that's what people were doing. Like, they you know, the sites have, like, these big old like, filled with 10,000 ads on them, and that's how they make their their money e Oh, yeah. Illegally thing. So that what they do is they people were copying the m three u eights, putting them on a single page with an iframe and sharing that so there'd be no ads. And then, of course, they've gotten smarter than that. Yes. Oh, man. They gotta lock it down. That's crazy.
Wes Bos
Yeah. Well, it's it's kinda funny because when I posted about this being able to use Cloudflare r two, a lot of people are like, they're gonna shut you down, or they're gonna they're gonna try to they're gonna try to get enterprise sales on you. Does my concern too. Yeah. And it certainly is still a concern because it could happen. But, like, they had they have a blog post that says, we explicitly declare that you're allowed to do this. I think the only caginess they have around it is that people abuse it. People put copyrighted material on here. People use it to stream hockey games or whatever, and you have to be able to lock those things down, or or people simply are just like like theoretically, YouTube could run on Cloudflare r two for free. You know? And they're not gonna let that happen because it's there's a much bigger company. So, like, at at a certain point, they say, there's gotta be somewhere for them to say, hey. You can't do this.
Wes Bos
But I think that you're a you're a ways away from being an enterprise customer, I think.
Wes Bos
Yeah. Although, here I am on on Vimeo. I'm just looking at moving mine off of Vimeo because I was using the $200 month pro plan from Vimeo, and they came knocking at my door saying, you're not following terms of service. Mhmm. And now it Scott me, like, $10 to to stream all my video.
Scott Tolinski
Yeah. $10 to stream your video. You could be streaming on Mux for, quite a bit less.
Wes Bos
I I they have they have offered me, like like, tons of credits and whatnot.
Wes Bos
Most of that $10 is because I my free courses are also streaming on there. So another option I could do is simply just stream the free ones from YouTube.
Wes Bos
Mhmm. So that's that's an option as well. But I need to Yeah. I'm probably gonna move it to Mux fairly soon. And I was talking to Dave Kiss, from Mux, and they said they are working on a new program where if you stream developer content, they'll give you $1,000 a month towards your credit, which is a lot. You can you could probably host all of Vercel up tutorials on that many times over. Right? Man. That's cool. In exchange for a logo on the page.
Wes Bos
So I would put a powered by Mux or whatever, and then you could get things. So it's that's it seems like a pretty cool program.
Scott Tolinski
He said the announcement's coming soon, but there's already a page for it. Oh, well, shout out to Mux. They've always been, good good friends of us, good friends at LevelUp.
Scott Tolinski
And, honestly, Dave's a really cool guy too. We got to hang out at
Wes Bos
render last year. Oh, yeah. Lot of fun. Yeah. Yeah. They're they're a good company, and and, like, as much as this stuff costs and, like, it's fun to go down the route of, go down the route of doing it yourself, the Mux is not fleecing you, like a lot of these other platforms as the services Yarn, so I would feel pretty comfortable going there.
Wes Bos
But let's rattle through a couple other options.
Wes Bos
Scott the Mux Love Fest. Cloudflare Stream, we said Node four k.
Wes Bos
Bunny JS the I keep hearing about Bunny. Bunny started as, like, a CDN company. Now they have one called Bunny Stream, and their prices are extremely good.
Scott Tolinski
I've been hearing about Bunny from my daughter.
Scott Tolinski
She's always telling me about Bunny.
Wes Bos
So Bunny also rolled out Deno, like, edge functions Nice. But not, like, time limited. I don't know. I gotta dip into it a little bit more, but it seems seems pretty good, to be able to run JavaScript on Bunny. It's kinda I think it's their kinda their jab at Cloudflare Workers.
Wes Bos
So, you know, like, Cloudflare is kinda taking over the whole AWS space as, like, more affordable and more approachable. I think
Scott Tolinski
I think Bunny is gunning for that that whole space as well. They're coming for the number Node spot. Do you remember that song, Ludacris? Man. No. I don't. Oh, yeah. That was kinda late stage Ludacris. Not really like Ludacris rollout prime or anything like that. Rollout is That was a good one. Yep. A big fan of, Ludacris.
Scott Tolinski
There's also AWS, like we mentioned many times. There's the whole VOD workflow, the video on demand workflow that you can it's essentially like a one click to start up this this workflow. But, again, I probably wouldn't recommend it unless you are interested in building out click to start, pnpm engineer per year to $300 to maintain. I wouldn't use this one unless you are serious serious.
Cloudinary for video
Scott Tolinski
Also, we mentioned, we have not actually mentioned them throughout this episode. Cloudinary.
Scott Tolinski
Yeah. That's an option. Cloudinary also has a a video solution, which it was one of the ones I tried out, but it was a little immature when I tried it out several years ago. So I would be interested in knowing what it's like now.
Scott Tolinski
They talk about having programmable media so you can automate video life cycles, whatever that means. Automation for video with video flow, they have a full video API now. So, that looks nice and interesting. So I have not used Cloudinary for video specifically.
Scott Tolinski
But given how nice the product is to work in on Yeah. On photos, I kept imagine that would look pretty nice. $224
Wes Bos
a month gives you 600 gigs of bandwidth. I these companies gotta start giving free bandwidth because now the the fact that Backblaze and Cloudflare offer free bandwidth, It's it's really hard to to justify
Scott Tolinski
some of these other ones. I have, something interesting here. There's there's, like, you get a lot of the cool transforms and stuff. They have an example with a 16 by 9 video, like your normal video of a surfer.
Scott Tolinski
And then with just the URL, it transform in smart crop to stay locked on to a subject of which is the surfer for vertical video. So they have the 16 by 9, and then the vertical video is just kinda panning around. And they're just serving that AI vertical video.
Wes Bos
That is really pretty fancy. That's cool. I think that's how a lot of these these, like, TikToks that like, they do programmatic video. Yeah. This is a huge thing on TikTok. They'll take, like, a Reddit story, and they'll take some video of some guy in Pakistan, like, repairing a a car's axle or something like that. Player just jumping through Minecraft. Yeah. Yeah. They'll give you 2 videos in 1 story that are totally unrelated, but you're like, this is hitting all the receptors in my brain right now. I think that's how a lot of these guys make this this stuff. I don't know if it's specifically with Cloudinary, but it's this programmatic a Remotion is another one that we we didn't talk about. They're not really in this space, but you can programmatically make videos with React, which is we've had them on the show as well. Yeah. There's also Bitmoven,
Scott Tolinski
which Bitmoven is I found to be a bit technical.
Bitmovin video platform
Scott Tolinski
I I didn't really like using it when I tried it. It could be different. It's many years later.
Wes Bos
Warp, I think. Like, you got HGTV or something.
Scott Tolinski
I'm sure it's very solid, but in my experience, it didn't feel like it didn't feel like Mux Easy, and it didn't feel Cloudflare Stream Easy.
Scott Tolinski
And so, therefore, it's like, well, if those ones are cheaper for me, then I'm probably not going to bother. Yeah. Yeah. That's it's probably worth looking at if you've got a bigger
Wes Bos
bigger operation and you're pinching them because even, like, half a cent per minute viewed is is massive gains. Totally. So I'm sure people are always looking. And, also, like like, being able to move from one to another is like like, I'm on Vimeo, and that's not very movable.
Wes Bos
Mhmm. Because now I have to, like, reupload everything to another platform. But if I had these if I had all my source files in, like, a bucket somewhere, I could pretty easily move to some of these other services that just slurp up from a bucket and then transcode from for you. Yeah. That's a good point.
Scott Tolinski
Moving moving those buckets would be easier.
Scott Tolinski
Yeah. Before we get out of here, there's some other features that we didn't talk about, like live streaming. And, like, live streaming is is kind of like, Wes you're live streaming from a computer to an ingest server that is then on the fly encoding the video to the different formats and then serving that.
Scott Tolinski
That's crazy. Technically, I I can't imagine writing something like that, so I'd be interested in learning a little bit more explicitly about that process.
Live video streaming
Scott Tolinski
I know it's FFmpeg because you can just stream info in. I was actually doing that when I was writing my own screen recorder with FFmpeg.
Scott Tolinski
It was very difficult,
Wes Bos
to I was writing massive file sizes. All the way down. I was trying to take raw video,
Scott Tolinski
and convert it into movie via, like, streaming it into FFmpeg, and it would be, like, 10 gigabytes for 10 seconds of video. And I was like, I'm doing something wrong here. There's there's a there's a problem.
Wes Bos
Yeah. It's the the bit rate is extremely high. I've been been playing with this other recorder.
Wes Bos
It's the one I sent you. Polycapture.
Wes Bos
Yeah.
Wes Bos
And they record multiple inputs at once. And, yeah, the files that come out of that thing are huge, but I I kinda don't want it any other way because then you lose you lose some of the quality.
Wes Bos
Yeah. Word. Clip stitching is another one if you wanna stitch clips together. This is actually something we do on the Syntax website for audio, to be able to detect Scott and I's voices.
Wes Bos
We did we clip on a, like, a 10 second clip on the end that says I'm not gonna say what it is, but it's a it's a set of decipherable words that we use to detect who is which speaker.
Wes Bos
And every time that we we do that before we send it out for transcript, that runs through FFmpeg and stitches them together.
Wes Bos
View stats is another another really interesting one as well if you wanna know how many people are are watching it or, like, where in the video are they are they watching? Like, we can go into our Spotify stats and see exactly visually where the ad reads are because the it goes
Scott Tolinski
down. People skip 30 seconds, and it goes right back up. Yep. And and, you know, YouTube obviously has, like, Wes in class for these types of analytics. You can see so much with that stuff.
Scott Tolinski
But if you wanna do this on your own, another and this sounds like a Mux ad for how much I'm pushing them. But another Mux feature is Mux data that has really super good video analytic data, smoothness, playback, success, viewer experience.
Scott Tolinski
So there's a lot of, like, really nice things where you can track how how your video JS being consumed. Now, obviously, that's not gonna be like YouTube Wes you get all of the information on, you know, individual users and geographic data and stuff like that, but it's still Mhmm. Pretty decent.
Wes Bos
And then, subtitles is another one. It's traditionally, I've always done my subtitles as a track in the video player. So there's a track element in HTML that you can use to point towards a Wes VTT file, and that will provide captions for you. You have to get the captions made somewhere. Right? You you either have them done by AI or you can, use a service to sort of generate them for you or they generally, the way they work is they run them through AI, and then they have people that that go through them.
Wes Bos
But that's also part of the HLS spec, which is the different caption tracks. So you could do them in different languages and whatnot. And I think I wanna move my stuff over to that because then it's all altogether. Right?
Scott Tolinski
Yeah. Altogether. For sure. Sick.
Wes Bos
Wes. I think that's it. Yeah. Let us know if you have any other tips on video streaming. I would love to hear what you have run into and how you've done it.
Wes Bos
Let's get into some sick picks and shameless plugs. Yeah. My, sick pick is gonna be PolyCapture app. So, for the longest time, when I'm recording, I have wanted the ability to capture multiple sources at once. And a source can be a microphone, can be a entire monitor, can be a specific application on your computer, and I wanna be able to just record them all at once, especially the windows. You wanna record a window, and if you tap over top of that window, you don't lose it because it's it's always just recording the window and not what shows up on your your display.
Wes Bos
And Scott put me onto this app that was launching soon called PolyCapture.
Wes Bos
It's just by a a dev, Bos, or or Mac dev out of Germany, and it does exactly this. And it's been pretty good. There's a couple bugs I found here here and there, but I've I've logged them in the in the GitHub, and the the author has been really responsive in fixing them. So it's just something I've wanted for a long time. OBS has one called source record, and it's just like a bad UI. It works it works great, but it's just not the UI you want for being able to select multiple inputs at once. It's sir it's certainly not, like, super
Scott Tolinski
super easy and reliable.
Scott Tolinski
Like, I feel like I have to do a test record every single time before I actually record.
Scott Tolinski
That said, I have been using source record as the primary means of recording nowadays only because I finally got it dialed in. I know exactly I have it all set up. I basically just open OBS and click button,
Wes Bos
and I'm good to go. So that's what I've been doing. But, yeah, the, But then you gotta have multiple profiles because, like, what happens if you don't wanna record them? Yeah. Wes, no. Switch profiles and then push the new profiles recording. Yeah. Is different. Yeah. Totally. Definitely
Scott Tolinski
will use this PolyCapture. It's the app I wanted to build and, what I was working warp, so I'm I'm stoked to see this, especially the interface is nice. It's, like, $5 or something like that. Like, I I think the guys should charge more. It's not like a a monthly thing or anything. Yeah. So pretty sure. I'm going to sick pick the Anker MagGo, which is a, in fact, folks on video will get to see. I have a it's like a pretty Yeah. Decently Let's see how well this works. Same thickness as my phone. Yeah.
Scott Tolinski
Pop on there.
Wes Bos
Shake it more.
Scott Tolinski
Wow. Okay. Yeah. Don't go vertical with it. I was I I just lost it going vertical. That's, yeah, sheer sheer strength. Sheer strength. Yes. Either way, it's got 10 milli 10,000 milliamps batteries. It's very Node.
Scott Tolinski
Works super Wes. And you just stick it on the back of your phone, and it MagSafe charges your phone all day of the week anytime you want. And I've actually found this to be nice even being around the house sometimes. Like, I'm in the gym, and I don't want to bring a thing. And my phone's about to die, and I'm listening to music on my phone. So I'll just grab the power bank and snap it on there, and then I don't have to go look for a charger or whatever. So, yeah, I found this to be a nice little Sanity, battery. Make sure I didn't break it. Sometimes I even bring the power bank to my desk just because I don't wanna
Wes Bos
figure out where to plug the cord in. You know? I got one of these bad boys sitting on my desk too. Was that Jackery? Oh, no. Anker? Yeah. What's that for?
Scott Tolinski
It's just a big battery, and you can have it as a light too. We use it outside with our projector.
Scott Tolinski
So or, like, we're playing cards outside. Right? We're playing cards outside. We're playing some Euchre, some Midwest Euchre. We put that on there. We turn the little lamp on. People can plug their phones into it, whatever.
Wes Bos
Oh, that's nice. It's nice. Yeah. Yeah. Yeah. Not having to run an extension cord is so good. I recently, I got a hedge trimmer that's battery. And I was like, I hate running an extension cord. It's such a pain in the butt. I only ever had gas of those before,
Scott Tolinski
so I I wasn't used to ever having, that would that seems like that would be awful to have an extension cord for that.
Scott Tolinski
But, yeah, battery, hedge trimmer, way to go. Yes. Yeah. Weed leader, all that stuff.
Wes Bos
Awesome. Alright.
Scott Tolinski
Shameless plugs. What do you got for us, Scott? Shameless plugs. Head on over to youtube forward slash at syntax f m.
Scott Tolinski
Smash that subscribe button. We're doing so much on YouTube these days. It's more than just a video podcast. It's more than just us sitting here, jabbering into mics. We're we got really deep in-depth videos from CJ, who's been just really crushing it. He he made a video on Deno 2 that came out today at the time of recording this, which JS, does Deno 2 deliver, which is a a pretty cool video. He goes pretty in-depth on some edge casey stuff and and gets really, like, into what did Deno two promise and did it, hit those. I also just did a video on where I put Copilot workspace to the test with 5 GitHub issues. And the whole thing is that you convert a GitHub issue with natural language into a PR.
Scott Tolinski
Scott like, you have an issue, you tell it what to do, natural language, and it writes the code for you and submits a PR. And I put it to the test through 5 different PRs, and, you'll have to see how that test went. Awesome. Alright. Thanks, everyone, for tuning in. We'll catch you later.