859: Streaming Video in 2025

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs. Show Notes 00:00 Welcome to Syntax! 00:50 Brought to you by Sentry.io. 01:15 The history of video streaming. 02:10 How video streaming works: The Tech. 03:54 How video streaming works: Transcoding. 06:37 How video streaming works: Variants. ffmpeg. Wes’ R2-video-streaming. Wes’ Transcoding. YT-DL. YT-DLP. 13:13 Dynamic ad insertion. 14:29 Bandwidth and hosting. Mux. 18:03 Cloudflare. 19:13 The costs. Wes Bos Tweet Cloudflare TOS. Steve Tenuto tweet. 25:39 Media players. Media Chrome. 29:42 CDN. 32:04 Access control. 33:35 Solutions. Mux. Cloudflare Stream. Bunny.net Stream AWS Media Convert. Cloudinary. Bitmovin. 41:55 Some other features. 45:47 Sick Picks & Shameless Plugs. Sick Picks Scott: Anker MagGo. Wes: PolyCapture. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. Today we've got an episode for you on streaming video in 2025. Both rolling your own streaming video, how that works, as well as talking about a bunch of services that will help you out with it. My name is Wes Boss. I'm a developer from Canada, streams a lot of video with, as always, is also someone who streams a lot of videos. Scott Tolinski, how are you doing today, Scott?

• 0:25Scott Tolinski?

  Hey, man. Doing great. You know what? 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 2024 and beyond 20? Let's just say 2025.

• 0:46Wes Bos?

  2025, yeah.

• 0:46Scott Tolinski?

  Let's face it, we're there already, which that's crazy, right?

• 0:50Wes Bos?

  So if you are going to be rolling your own, you're going to need Sentry, because you're going to 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 popped up there. And Sentry has been pivotal in figuring out why those things don't work. So check it out, sentry.io/syntax.

• 1:13Scott Tolinski?

  Yes, absolutely pivotal. So let's get into it. First and foremost, streaming video. You know, in the past, in olden days of web, you couldn't use anything other than Flash to play video. Then we got the video element for HTML, and the way people were primarily doing it at the time on a non-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. One was like, man, I even forgot OGV, OGG format.

• 1:47Wes Bos?

  Oh, that was awful. Yeah, OGV and whatever.

• 1:50Scott Tolinski?

  So all the different browsers had their own different formats. You had to ship all those different formats to everyone. 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 answer is really that you can't. So here's how video streaming works. It's a format called HLS, which stands for HTTP live streaming. If you've ever seen a .m3u8 extension, then you have seen what could be considered a playlist for chunks of video.

• 2:29Scott Tolinski?

  So if you've ever, I know, I don't want to put myself out here too much, but if I was streaming hockey games that were not in my, my area, and I'm not going to say illegally, but I was just streaming them. There was actually a website that would just post all of the NHL app's M38Us and you would just copy those and paste it into VLC, because the M38U 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, I'm loading a video. It's an M38U. I'm going to grab that M38U. I'm going to convert it. M3U8, yes. Oh, dyslexia.

• 3:08Wes Bos?

  Mew8.

• 3:09Scott Tolinski?

  Yes, M3U8. 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.

• 3:24Wes 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.

• 3:31Scott Tolinski?

  Yeah, it's Winamp. You load up Winamp, you got a playlist. Remember that?

• 3:36Wes Bos?

  Yes. Oh yeah, for sure. Winamp was, actually, the, we're going to be talking about Media Chrome, which is the web component for playing stuff that you can skin any way you want. And there is a Winamp skin for Media Chrome, which is full circle.

• 3:53Scott Tolinski?

  That's wonderful.

• 3:54Wes Bos?

  So if you want to build your own M3U8 file, you need to transcode your video into multiple versions, meaning that you have to first chunk up the video into two to four, sometimes longer, second chunks. And usually they, those are .ts files, which drives me nuts because .ts is also TypeScript and

• 4:20Wes Bos?

  Search for video files on your on Mac Finder, it shows you TypeScript files.

• 4:27Wes Bos?

  And those chunks are, you generally will take like, let's say you take a 4K video that's a minute long, right? It will convert it into two to four 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 4K one with a specific bitrate and you'll have a 1080p one with a specific bitrate and so on, for however many versions you want to be able to offer the people that are visiting. And resolution and bitrate is kind of a funky thing because resolution doesn't entirely define

• 5:10Wes Bos?

  the quality of the video, the bitrate of the video also and the Kodak 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 bitrate because when you start to go down in bitrate, things start to get fuzzy and the thing that goes fuzzy first is text.

• 5:35Scott Tolinski?

  Yeah, you might, you definitely might notice this 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 the video itself.

• 5:53Wes Bos?

  You know, I guess this is more of a compression thing, but I remember when I used to download like Family Guy and The Simpsons, I was always like marveling how much smaller the file sizes were than like, like regular TV shows. And it's because like the colors in them were much simpler and they can compress a lot more.

• 6:11Scott Tolinski?

  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 dial down the bitrate with compression or otherwise, and you'll see colors that should be solid potentially waver a little bit and be like one or two colors that are kind of blocky, if not the same, especially around like shadows and stuff like that.

• 6:37Wes Bos?

  So to create these M3U8 files, as well as the chunks themselves, you can, the tool that everybody uses is called FFmpeg. FFmpeg is this just wild open source project that like many billion dollar companies are built on top of. But there is a flag for it that is HLS playlist type VOD, which means video on demand. And that will chunk it into many ones, because you can also have an M3U8 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 one size. You have to run it multiple times and then concatenate them all into a single

• 7:22Wes Bos?

  M3U8 file. I wrote a 120 line transcode TypeScript script, just because scripting in Bash is painful. I'm much rather, I'm not doing the transcoding in JavaScript, but I'm using JavaScript just to sort of script it, which is orchestrated. Orchestra. There you go. Yeah.

• 7:44Scott Tolinski?

  Yeah. And you'll frequently see this. If you're paying a service to do this, there's, there's companies like Bitmove in that like a primarily ingest or AWS has some VOD 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 going to upload this thing. And now here's like a queue of all of the different, different resolutions and versions that my transcoding process needs to take care of.

• 8:09Wes 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'll upload a TikTok and a YouTube short at the same time. And the TikTok is ready in like two seconds and the YouTube takes forever. And it's because they're making, I don't know how many, how many possible copies.

• 8:30Scott Tolinski?

  Do you want to know how many?

• 8:32Wes Bos?

  Yes, I would love to know.

• 8:33Scott Tolinski?

  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. And there is a lot in there. There's a lot of versions, more than you might expect.

• 9:03Wes Bos?

  That's interesting. By the way, are you not using YTDLP yet?

• 9:09Scott Tolinski?

  I'm not using YTDLP.

• 9:10Wes Bos?

  That whole project got kicked off of YouTube, YouTube DL, and then they came back. I forget why, but now it's it's under YTDLP. It looks like it is still maintained.

• 9:23Scott Tolinski?

  I used to use YouTube DL or YouTube essentially as my video compression software to save me time for level up tutorials. And so what I would do is, yeah, you could drop a whole folder into YouTube. So I would finish my course. I would export it as 4K. 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.

• 9:56Wes Bos?

  They're so good at it. Like YouTube has its own like

• 9:59Scott Tolinski?

  Yeah.

• 10:00Wes Bos?

  algorithms for doing this type of thing. But also, you could probably use this just to transcode and then download the chunks yourself, you know?

• 10:09Scott Tolinski?

  Yeah.

• 10:09Wes Bos?

  I bet. And then some, some transcoding services as well, like Mux, they'll just do it on demand as well, 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 an M1 Mac. It's pretty fast. I kind of want the M4 now that for, for some of this. But like an eight minute video will take five minutes to, to chop up into a six or seven different resolutions, right?

• 10:41Scott Tolinski?

  Yeah.

• 10:42Wes Bos?

  So

• 10:42Scott Tolinski?

  The M4 dude, I don't know if you saw this on the M4 distraction tip. The screens are not glossy shiny anymore.

• 10:49Wes Bos?

  Yeah.

• 10:50Scott Tolinski?

  I want that.

• 10:52Wes Bos?

  Yeah, I want that as well. That, that seems pretty sweet. I can't justify, I just can't fathom.

• 10:58Scott Tolinski?

  No.

• 10:58Wes Bos?

  Unless you're doing like FFmpeg 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?

• 11:08Scott Tolinski?

  I'll tell you what, masking in DaVinci Resolve, especially like automated masking.

• 11:16Scott Tolinski?

  It like really, uh, 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. Um, 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.

• 11:42Wes Bos?

  But you, you saw somebody got an M4 and it's, it's much better on there. Cause like the specs show that it's like twice as fast.

• 11:49Scott Tolinski?

  No, I'm waiting for the M5.

• 11:52Wes Bos?

  Yeah. Yeah. I think I'm gonna, gonna hold out too. That's

• 11:54Scott Tolinski?

  I've decided to wait till the M5. I, I've made that because I did see that they might be making the little notch camera thing much, much smaller. And so that's a motivation for me to wait.

• 12:06Wes Bos?

  All right. That's good. All right. So back to, to video. Um, we talked about using FFmpeg to transcode your video. Um, 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 first two seconds and then it, it gets much better. And what's happening there is it's, it's testing your, uh, it gave you like a 720 for the first two seconds and it goes, ooh, you downloaded that pretty fast. You got some fast internet there. So then it goes, okay, I'm gonna bump you up

• 12:50Wes Bos?

  to 4K and then, and then you get the, the better version of that.

• 12:55Scott Tolinski?

  Yes. And then again, if it's struggling, bump you back down. I think just about everyone has experienced this, especially when faster internet wasn't as available as it is today. Definitely was like a major thing to have video all of a sudden go super blocky all the time. And maybe that, you know, a lot of people are still experiencing that. Um, there's also another really cool thing that you, you, because right, you have a playlist, you have chunks 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 is 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

• 13:40Scott Tolinski?

  before going back to the M three U eight playlist. So I thought that was super interesting is because we're dealing in chunks here. It makes it really easy to insert an ad in between chunks.

• 13:52Wes Bos?

  Yeah, you can simply just swap out one of those chunks with a different one. Because if you look at the M three U eight file, what it does is it lists the resolutions and bit rates. And then those point to additional M three U eight files that have the chunks in them for each of the resolution bitrate combinations. And, and then they will then point towards a actual file that lives somewhere, which is a dot TS file. So you simply are just, just swapping that sucker out with something that is dynamic on request.

• 14:28Scott Tolinski?

  Yeah, totally.

• 14:29Wes Bos?

  Um, so let's talk about bandwidth and hosting. So once you actually have these dot TS chunks, I'm like, where do they go? Right. And this actually came upon a, a question that we had from, from, well, it kind of came two 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. There is 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 there's, there's Mux and whatever. And I'm not saying I'm going to do this because this is, is kind of hard.

• 15:13Wes Bos?

  Although, um, Aaron Francis and Steve, uh, Tenuto, they actually are doing this. They're doing exactly what I was asking where they're, they're just hosting it on CloudFlare themselves and they're processing it and whatnot. So what needs to happen is you need to host these chunks somewhere, right? And you, you need to be able to download them and stream them in as, as they are needed. And where do you put big files? Well, you can put them on Amazon S 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, they call it blob storage, right?

• 15:58Wes Bos?

  Just store data, raw data.

• 16:00Scott Tolinski?

  I will say that if you are choosing to go down this route of storing these blobs yourself or these, you have to be very organized 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. You should look up exactly like a good structure to do that before you just choose.

• 16:22Wes Bos?

  You almost need like a database for these types of things because

• 16:25Scott Tolinski?

  You do.

• 16:25Wes Bos?

  As much as you can download, like as much as you can like save an M3U8 file, you really have to be able to generate those things dynamically, especially if you're trying to limit access control.

• 16:40Scott Tolinski?

  Let me tell you, the workflow, so this is the Amazon suggested workflow. If you were doing this by hand, you have one bucket for your source. 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. That converts it and then puts it into another bucket. 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 a process to convert them. You need a CDN and then you need a database to actually store where they're at.

• 17:25Wes Bos?

  To store it.

• 17:26Scott Tolinski?

  Yeah, it's of course, if you're doing a whole upload kind of process.

• 17:30Wes Bos?

  Yeah, if your user, so that FFmpeg one is kind of interesting because if you're just doing something like I'm doing, which is you have courses. And every time you have a course or updated 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, 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. 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. According to their Terms of Service,

• 18:13Wes Bos?

  they even updated it to say this, as long as you are using another product on Cloudflare to store these. So Cloudflare R2 is a place to store them. It is allowed, even though they have a competing stream product, you may put them in a Cloudflare R2 product and then you may put the Cloudflare CDN in front of that, because that's the second step to this is 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 going to have a little bit of slow, they're going to have slow streaming, right? So what you can do is you need,

• 18:52Wes Bos?

  you need to put those files on servers around the world. And Cloudflare's CDN sits in front of your R2 bucket and that, again, that is allowed via the Terms of Service. I looked into it and, and then that will be available around the globe in their different data centers.

• 19:12Scott Tolinski?

  Yeah. Man.

• 19:15Wes 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 4K video for $2.18. You might be thinking, how is that possible? So let's, let's break it down into 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.

• 19:47Wes Bos?

  On Cloudflare, let's say you have a course with 30, 15 minute videos, right? That's seven and a half hours of content that needs to be uploaded. That seven 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'd probably be less if you only do like 4K, 1080, 720, but if you want to go all the way down to like 360, it's going to be around that.

• 20:18Scott Tolinski?

  Yeah.

• 20:19Wes Bos?

  Now, you have, so you have 16 gigs of video. R2, which is Cloudflare's storage product, charges you 1.5 cents per gig per month, meaning that just to simply hold those files, it's going to cost about 25 cents a month. Or about three bucks a year to just hold those. And that's not a lot if you have a single course. It is a lot if you have like your Blue Sky or Twitter and people are uploading that much every minute to you.

• 20:50Scott Tolinski?

  I wonder how that compares to Mux, which for storage is

• 20:55Wes Bos?

  Well.

• 20:56Scott Tolinski?

  .003 cents or .003 dollars, so .3 cents per minute.

• 21:03Wes Bos?

  Yes. That's, I really like this about Mux because they, 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 going to be using, you know? I don't know how many people are going to be watching. So if you take that 30, 15 minute videos, seven and a half hours of content, Mux does it per minute. So that's going to cost you about a buck 35 a month to store or 16 bucks a year to hold it. So really it's significantly more, but really not that much if you're thinking about seven and a half hours of content.

• 21:44Scott Tolinski?

  I can give you some real data here. Level Up Tutorials has 6,000 minutes uploaded to Mux. So let me do that math here. Yeah, it is for 6,000 minutes of video, which let me tell you is a lot of courses of videos.

• 22:00Wes Bos?

  A hundred hours.

• 22:01Scott Tolinski?

  A hundred hours of video. It cost me $18 to store that. 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. It encodes as you go. And then $13 for minutes streamed. So $33 for the entire course base for Level Up Tutorials.

• 22:31Wes Bos?

  I paid more for my database, yeah.

• 22:34Scott 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 got to worry about storage or ingest. You don't have to worry about saving things, database. You upload it and then you just get the M3 U8 file and you just plop that in your player.

• 22:52Wes Bos?

  Good to go, yeah. So the other thing, when people watch it, it costs you five cents per hour of video watched. So if somebody watches that entire seven and a half hour course, and this is kind of how I, how I look at it, right? My courses are anywhere from seven hours to 40 hours. And you look at it and that's, if it's a seven and a half hour course, it's going to cost you 43 cents if they watch every single minute of it and don't skip ahead or whatever. So 43 cents for somebody to watch seven and a half hours of video. But then like, if you think about like, like Netflix, you know, people watch three hours a day. That's 90 hours a month.

• 23:36Wes Bos?

  And it costs you what five, five cents per hour, $4.50 just in bandwidth. So it's still, still less, but, but not nothing.

• 23:48Scott Tolinski?

  Yeah.

• 23:48Wes Bos?

  But that's just a kind of an idea of, of that. And 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 run that compute. And, and that server would be easy. It depends on obviously how much video you have, but 10, 15, up to hundreds and hundreds 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.

• 24:22Scott Tolinski?

  Yeah. And Amazon, AWS has like a service specifically for this. Elemental Media Convert, right?

• 24:30Wes Bos?

  Yeah.

• 24:30Scott Tolinski?

  So like they have a service that's completely designed just to handle media conversion at this, at this scale.

• 24:36Wes Bos?

  I, and I did the math on it. It's much more expensive than Mux is.

• 24:40Scott Tolinski?

  Is it? Yeah.

• 24:41Wes Bos?

  Yes.

• 24:42Scott Tolinski?

  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 eight different services together, I'm like, oh boy, too much for me.

• 24:57Wes Bos?

  Yeah. Well, you should look at the, the graphic of how Amazon suggests you do video on demand.

• 25:05Scott Tolinski?

  Oh, yeah.

• 25:05Wes Bos?

  And it's like, yeah, upload it to S3, put it in a Lambda, then throw it to the media convert, then put that on CloudWatch. Then that goes to EventBridge, then that goes in front of CloudFront as a CDN. 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, you are CBS, you could pay people to figure that out, but

• 25:28Scott Tolinski?

  Totally.

• 25:29Wes Bos?

  Not for, for regular folk.

• 25:31Scott Tolinski?

  Totally. Yeah, that's where I landed on. It's like, this is not for me.

• 25:34Wes Bos?

  Yeah.

• 25:35Scott Tolinski?

  The solo video guy trying to get his website working nice.

• 25:39Wes Bos?

  So let's talk about actual players. So you cannot take an M3U8 and just pipe it into a video element. Because that

• 25:49Wes Bos?

  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 believe that's HLS JS is the, the big one.

• 26:02Scott Tolinski?

  That's the big one. That's the one everybody uses. HLS is actually built into Safari, but it has been since version six. 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 hundred different playing player libraries. In fact, man, I could, I could spend a whole episode on different.

• 26:29Wes Bos?

  Yeah, remember JW Player or?

• 26:31Scott Tolinski?

  JW Player, Plyr, P L Y R, Player.js, I think. 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.

• 26:47Wes 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 Media Chrome. And that's from Mux and it's a web component and it just freaking works. And it like, you just, it's, it's like HTML. 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. You can do thumbnail preview, like pretty much anything you can think of. There's either a plugin for it or it's built in and you simply just use the

• 27:27Wes Bos?

  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.

• 27:37Scott Tolinski?

  Yes, it is. And honestly, Media Chrome is not only my favorite player by a long shot. 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. Single person somewhere and there are endless edge cases with a video player. And you get into a situation where you want, let's say Chromecast. 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 going to get in there? I'm going to submit PRs to this complex video player project.

• 28:21Scott Tolinski?

  And I've never had that with Media Chrome. It just works. It works super well. It does everything that it's supposed to do. And I don't have any bugs with it.

• 28:32Wes Bos?

  You have like full control over all the CSS, over everything, you know, it's not like a, and it's not like an iframe embed or anything like that. It just, it works. And it worked, we use it on syntax websites. It's not just video as well, right? It works for audio.

• 28:47Scott Tolinski?

  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 that. Or Spotify Audio. There's a Spotify Audio element. That's interesting.

• 29:02Wes Bos?

  You can embed Spotify right in the page. Yeah, it's pretty cool. It's, it's, 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. And it just, somebody has done the work of building such a flexible player, huge project. And it works in React and Svelte and Vanilla JavaScript. It works in HTML.

• 29:30Wes Bos?

  You don't even need a framework for it. So yeah, it's just a really nice, nice experience.

• 29:36Scott Tolinski?

  Yeah, it takes care of all the little things. And so definitely, if I were saying anything, yes, Media Chrome. Next one, CDN. Like what do you do about a CDN? I've, I've done the Amazon route, putting CloudFront in front of video before. 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 non-existent.

• 30:15Scott Tolinski?

  But now I see that there is like a full API. The pricing seems pretty decent and you can do things like control access by location. You can have user generated.

• 30:28Wes Bos?

  Yeah, it still doesn't do 4K though. So it's not worth your, your time.

• 30:33Scott Tolinski?

  Doesn't do 4K, really?

• 30:35Wes Bos?

  And I, I think part of that is because they, again, they bill based on minutes of video streamed. So if everyone starts using 4K, I don't know what the whole, but like, we talked about this probably four years ago on the podcast, you know, it doesn't support 4K and like, oh, maybe soon, but I don't, I don't know what the, the plan is there.

• 30:56Scott Tolinski?

  They do have WebRTC support.

• 30:59Wes Bos?

  Okay. Um, I do want to say really quickly about the Cloudflare R2. Cloudflare R2 by itself is still in a bucket in one place in the world and it is not CDN-ized. Even if you have Cloudflare, Orange Cloud in front of it, it's still not going to be CDN-ized. 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.

• 31:29Scott Tolinski?

  For your hunks. Yeah. I did, I did just find the FAQ. Cloudflare, we use different adaptive streaming levels from 360p to 1080p. Yes. They don't even say anything about 4K.

• 31:41Wes Bos?

  It seems wild that it's still not a thing. Like, I can understand four years ago when they were initial product, but nothing.

• 31:49Scott Tolinski?

  And to me, if YouTube supports it, you gotta support it in your, in your product.

• 31:53Wes Bos?

  I agree. And like, I watch YouTube in 4K, just sitting on my computer.

• 31:56Scott Tolinski?

  I watch my YouTube in 4K and VR.

• 31:59Wes Bos?

  And there you go.

• 32:02Scott Tolinski?

  Yeah, just trying to.

• 32:03Wes Bos?

  Yeah. Access control, basically, when you want to provide a link to something that is in a bucket, whether it's S3 or R2 or any of these things, they all, they all follow the same Amazon spec. It's actually kind of funny if you, if you create an access link on CloudFlare R2, it has like dash AMZ, like 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 M3U8. It really depends on if you think people are going to be

• 32:42Wes Bos?

  stealing your video or not. In a lot of cases, even in like big TV stations, it's not worth the hassle and the extra compute to check for access. That they just say like, if you can't access our M3U8, then it's not a big deal.

• 32:58Scott Tolinski?

  Yeah, I would tell you that people streaming hockey games, they, they do protect those M3U8s. They don't want anybody just grabbing their stream that they've gotten and putting it on an iframe. Cause that's what people were doing. Like, 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 illegally things. So that what they do is they, people were copying the M3U8s, 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.

• 33:31Wes Bos?

  Yeah. Oh, man, they gotta lock it down. That's crazy. Yeah. Well, it's, it's kind of funny because when I posted about this, being able to use CloudFlare R2, a lot of people are like, they're going to shut you down, or they're gonna, they're gonna try to, they're gonna try to get enterprise sales on you to charge you.

• 33:49Scott Tolinski?

  That was my concern too.

• 33:49Wes Bos?

  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 declared 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.

• 34:14Wes Bos?

  Lock those things down or or people simply are just like, like theoretically YouTube could run on CloudFlare R2 for free, you know, and they're not going to let that happen because it's there's a much bigger company. So like at a certain point, they say, there's got to be somewhere for them to say, hey, you can't do this. But I think you're a why you're a ways away from being an enterprise customer. I think, although here I am on Vimeo, I'm just looking at moving mine off of Vimeo, because I was using the $200 a month pro plan from Vimeo and they came knocking at my door saying, you're not following terms of service. And now it cost me like 10 grand to stream all my video.

• 34:59Scott Tolinski?

  Hmm. Yeah. 10 grand to stream your video. You could be streaming on Mux for quite a bit less.

• 35:06Wes Bos?

  I, I, they have, they've offered me like, like tons of credits and whatnot. Most of that 10 grand 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. So that's, that's an option as well. But I'm probably going to 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 a thousand bucks a month towards your credit, which is a lot. You can, you could probably host all of Level Up tutorials on that many times over, right?

• 35:49Scott Tolinski?

  Man, that's cool.

• 35:50Wes Bos?

  In exchange for a logo on the page. So I would put a power by Mux or whatever, and then you could get things. So it's, it seems like a pretty cool program. He said the announcement's coming soon, but there's already a page for it.

• 36:03Scott Tolinski?

  Wow. Well, shout out to Mux. They've always been a good, good friends of us, good friends of Level Up. And honestly, Dave's a really cool guy, too. We got to hang out at Render last year. Oh, yeah. Fun. Yeah.

• 36:15Wes Bos?

  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 are. So I would feel pretty comfortable going there. But let's rattle through a couple of other options. Stop the Mux love fest. Cloudflare Stream, we said, no 4K. Bunny is 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.

• 36:55Scott Tolinski?

  I've been hearing about Bunny from my daughter. She's always telling me about Bunny.

• 37:01Wes Bos?

  So Bunny also rolled out Dino like edge functions. But not like time limited. I don't know, I gotta dip into it a little bit more, but it seems, seems pretty good. Be able to run JavaScript on Bunny. It's kind of, I think it's their kind of their jab at Cloudflare workers. So you know, like Cloudflare is kind of taking over the whole AWS space. As like more affordable and more approachable. I think, I think Bunny is gunning for that, that whole space as well.

• 37:35Scott Tolinski?

  They're coming for the number one spot. Do you remember that song Ludacris? Man.

• 37:40Wes Bos?

  No, I don't.

• 37:41Scott Tolinski?

  Oh yeah, that was kind of late stage Ludacris. Not really like Ludacris rollout prime or anything like that.

• 37:46Wes Bos?

  Rollout is.

• 37:50Wes Bos?

  That was a good one.

• 37:51Scott Tolinski?

  Yeah, a big fan of Ludacris. 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.

• 38:08Wes Bos?

  One click to start, one engineer per year to $300,000 to maintain.

• 38:13Scott Tolinski?

  I wouldn't use this one unless you are serious, serious. Also. We mentioned, we have not actually mentioned them throughout this episode. Cloudinary.

• 38:22Wes Bos?

  Yeah, that's a good option.

• 38:23Scott Tolinski?

  Cloudinary also has 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. 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, but given how nice the product is to work in on photos, I kept imagining that would look pretty nice.

• 39:01Wes Bos?

  224 bucks a month gives you 600 gigs of bandwidth. These companies gotta start giving free bandwidth, because now the fact that Backblaze and Cloudflare offer free bandwidth, it's really hard to justify some of these other ones.

• 39:21Scott Tolinski?

  I have something interesting here. 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. And then with just the URL, a 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 kind of panning around, and they're just serving that AI vertical video. That is really pretty fancy.

• 39:55Wes Bos?

  That's cool. I think that's how a lot of these TikToks that like they do programmatic video. 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 car's axle or something like that.

• 40:12Scott Tolinski?

  Minecraft player, just jumping through Minecraft.

• 40:14Wes Bos?

  Yeah, they'll give you two videos in one 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 stuff. I don't know if it's specifically with Cloudinary, but it's this programmatic, Remotion is another one that 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.

• 40:39Scott Tolinski?

  Yeah, there's also bit moving, which bit moving is I found to be a bit technical. I I didn't really like using it when I tried it. It could be different. It's many years later.

• 40:49Wes Bos?

  Kind of corpo, I think, like you got HGTV or something.

• 40:54Scott 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. And so therefore it's like, well, if those ones are cheaper for me, then I'm probably not going to bother.

• 41:12Wes Bos?

  Yeah, yeah, that's it's probably worth looking at if you've got a bigger, bigger operation and you're pinching them because even like half a cent per minute viewed is is massive gains. 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. Because now I have to like re-upload 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.

• 41:50Scott Tolinski?

  Yeah, that's a good point. Moving, moving those buckets would be easier.

• 41:54Wes Bos?

  Yeah.

• 41:55Scott Tolinski?

  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 where 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. That's crazy. Technically, I can't imagine writing something like that. So I'd be interested in learning a little bit more explicitly about that process. 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.

• 42:28Wes Bos?

  Oh, yeah.

• 42:29Scott Tolinski?

  Very difficult. I was writing massive file sizes.

• 42:33Wes Bos?

  All the way down.

• 42:33Scott Tolinski?

  I was trying to take raw video 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.

• 42:48Wes Bos?

  Yeah, it's the, the bitrate is extremely high. I've been, been playing with this other recorder.

• 42:54Scott Tolinski?

  So when I sent you.

• 42:55Wes Bos?

  PolyCapture, yeah. And they record multiple inputs at once. And yeah, the files that come out of that thing are huge, but I kind of don't want it any other way because then you lose. You lose some of the quality.

• 43:09Scott Tolinski?

  Yeah, word.

• 43:10Wes Bos?

  Clip stitching is another one. If you want to 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. 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. And every time that we, we do that before we send it out for transcript, that runs through FFmpeg and stitches them together. View stats is another, another really interesting one as well. If you want to know how many people are, are watching it, or like where in the

• 43:49Wes Bos?

  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 eh, down, people skip 30 seconds and it goes right back up.

• 44:03Scott Tolinski?

  Yeah. And, and you know, YouTube obviously has like best in class for those types of analytics. You can see so much with that stuff. But if you want to do this on your own, another, and I, 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. So there's a lot of like, really nice things where you can track how, how your video is being consumed. Now, obviously, that's not going to be like YouTube where you get all of the information on, you know, individual users and geographic data and stuff like that, but still pretty decent.

• 44:46Wes 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 web VTT file.

• 45:03Wes Bos?

  And that will provide captions for you. You have to get the captions made somewhere, right? 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. 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 want to move my stuff over to that because then it's all all together, right?

• 45:34Scott Tolinski?

  Yeah, all together, for sure. Sick.

• 45:37Wes Bos?

  Yes, I think that's it. Yeah. Let us know if you have any other tips on video streaming. We'd love to hear what you have run into and how you've done it. Let's get into some sick picks and shameless plugs.

• 45:51Scott Tolinski?

  Yeah.

• 45:52Wes Bos?

  My sick pick is going to 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 want to be able to just record them all at once, especially the windows. You want to record a window and if you tab over top of that window, you don't lose it because it's always just recording the window and not what shows up on your your display. And Scott put me onto this app that was launching soon called PolyCapture. It's just by a dev iOS or Mac dev out of Germany. And it does exactly

• 46:36Wes Bos?

  this. And it's been pretty good. There's a couple of bugs I found here and there, but 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.

• 47:00Scott Tolinski?

  It's it's certainly not like super. Super easy and reliable. Like, I feel like I have to do a test record every single time.

• 47:08Wes Bos?

  Yeah.

• 47:09Scott Tolinski?

  Actually record. 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.

• 47:23Wes Bos?

  Yeah.

• 47:23Scott Tolinski?

  And I'm good to go. So that's what I've been doing. But yeah, the

• 47:26Wes Bos?

  But then you gotta have multiple profiles. Cause like, what happens if you don't want to record them?

• 47:31Scott Tolinski?

  Yeah.

• 47:31Wes Bos?

  You gotta switch profiles.

• 47:33Scott Tolinski?

  I pretty much use it for recording, yeah.

• 47:35Wes Bos?

  Different, yeah.

• 47:36Scott Tolinski?

  Totally. Definitely will use this PolyCapture. It's the app I wanted to build and what I was working towards. So I'm stoked to see this, especially the interface is nice.

• 47:46Wes Bos?

  It's like five bucks or something like that. Like, I think the guys should charge more. It's not like a monthly thing or anything.

• 47:52Scott Tolinski?

  Yeah.

• 47:52Wes Bos?

  So, pretty sweet.

• 47:54Scott Tolinski?

  I'm going to sick pick the Anker Mag Go, which is a in fact, folks on video will get to see, I have a, it's like a pretty decently

• 48:06Wes Bos?

  We'll see how well this works.

• 48:07Scott Tolinski?

  Same thickness as my phone. Yeah.

• 48:10Wes Bos?

  Shake it. Shake it more. Ah, wow.

• 48:19Scott Tolinski?

  Okay, yeah, don't go vertical with it. I was, I just lost it going vertical.

• 48:22Wes Bos?

  That's, yeah, sheer, sheer strength.

• 48:25Scott Tolinski?

  Sheer strength, yes. Either way, it's got 10 milli, 10,000 milliamps batteries. It's very nice. Worked super well. 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 handy battery. Make sure I didn't break it.

• 49:00Wes Bos?

  Sometimes I even bring the power bank to my desk just because I don't want to figure out where to plug the cord in, you know?

• 49:06Scott Tolinski?

  I got one of these bad boys sitting on my desk, too.

• 49:08Wes Bos?

  Was that Jackery? Oh, no, Anker?

• 49:10Scott Tolinski?

  Yeah.

• 49:11Wes Bos?

  What's that for?

• 49:13Scott Tolinski?

  It's just a big battery and you can have it as a light, too. We use it outside with our projector.

• 49:20Scott 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.

• 49:32Wes Bos?

  Oh, that's nice.

• 49:33Scott Tolinski?

  It's nice, yeah.

• 49:34Wes Bos?

  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.

• 49:46Scott Tolinski?

  I only ever had gas of those before. So I wasn't used to ever having, that would, that seems like that would be awful to have an extension cord for that. But yeah, battery hedge trimmer, way to go. Yes.

• 49:57Wes Bos?

  Yeah.

• 49:58Scott Tolinski?

  Weed, weed, all that stuff.

• 50:01Wes Bos?

  Awesome. All right. Shameless plugs, what do you got for us, Scott?

• 50:05Scott Tolinski?

  Shameless plugs, head on over to YouTube, forward slash at syntax FM. 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 got really deep, in-depth videos from CJ, who's been just really crushing it. He, he made a video on Dino 2 that came out today at the time of recording this, which was, does Dino 2 deliver? Which is a pretty cool video. He goes pretty in-depth on some edge Casey stuff and gets really like into what did Dino 2 promise and did it hit those? I also just did a video on where I put Copilot Workspace to the test with five GitHub issues.

• 50:47Scott Tolinski?

  And the whole thing is that you convert a GitHub issue with natural language into a PR. So 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 five different PRs and you'll have to see how that test went.

• 51:07Wes Bos?

  Awesome. All right. Thanks everyone for tuning in. We'll catch you later. Peace.