Video for the Web 2020 and Beyond

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski and Wes Bos. Welcome

to Syntax. This is the podcast with the tastiest web development treats out there. Today, we've got a podcast on video for the web 2020 and beyond. So I think, like, Flash player was just died the other day. I think it was, like, laid to rest after all these Yarn, and, we've had HTML 5 video for, maybe 5 or 6 years.

And anyone can put a m p 4 in a video tag, but there's so much more to it specifically around transcoding and encoding and live streaming and all that good stuff. So we're gonna attempt to break it down. Scott has gone through sort of all of this in the last couple months, and he's just been collecting little tidbits of what he's learned along the way. So today, we are sponsored by Sanity, which is a structured content CMS for your projects and FreshBooks, which is cloud accounting. I'm Wes Bos. With me, as always, is Scott Talinsky. How are you doing today, Scott Talinsky?

Hey. I'm doing good. I went to physical therapy this morning. Got some electrified needles in my back. Bos some moving around here and, feeling pretty good. Feeling much better than I was before. So, also, we we just got some hey.com email addresses.

Yes.

Scott with 3 t's.

Scott with 3 t's. I got I got wes [email protected], because [email protected] was Wes premium. 400 Wes.

Yeah. So if for those who don't know, it seems like from the tweets, no not a lot of people know. Basecamp is sick of email, and they're attempting to roll out their own email where you can screen people whether they let them in. And it's just it seems like a different approach tackling email. I don't totally understand it. Scott of like what inbox was doing.

Yeah. Yeah. It's it's not just an app. It's like a whole ethos around handling email. I don't think it's gonna work for me because I have an assistant who does a lot of my email. Mhmm. And my email problems don't resolve around, like, marketers getting I I guess I do I do get a quite a few marketers in my inbox trying to sell me stuff, but I'll give it a shot. But I certainly I don't think I'll use the athey.com, email address. So

maybe I don't know if they do custom emails yet or not. I think there's, like, a forwarding, but I don't know about custom emails. I don't know Node it's interesting, nonetheless. I just wanted to to hold on to that that address, maybe squat on that for a little bit and see how it goes. Yeah. I had to grab Wes Bos before some

joker grabbed it before me. That's why I was trying to get on it. Luckily, no one's going to try to grab Scott Tolinski, so, I think safe on that one. Well, you don't know. Someone someone snagged the Syntax FM Instagram when we announced the podcast. So Oh. People are are jerks just because they like to be jerks, so you have to think about this stuff when new stuff comes out.

Sure. That's banking on that that could even spell my name correctly. Alright.

Let's get into a video here, video for the web. For those of you who don't know, I'm stuck maybe a little bit about the catalyst for why I wanna do this episode first and foremost. But the reason I I've been thinking a lot about video on the web is because I've run a video streaming service. I don't know. So does Wes.

With both of our our platforms, we create video tutorials. Right? Node, I began having these thoughts of, like, hey. My entire business is video. I should probably be better about my video solution. My current video solution was hosting everything on YouTube and, keeping it all private and then using some fancy API work to import it all into the site and then have them embedded.

And that is fine, but it's not the most legitimate thing in the entire world. Not only that, I do get some complaints that people feel like the YouTube videos cheapens the experience. Right? Yeah. Even though the YouTube player's great, the YouTube videos are great, still pops in. It's obviously YouTube. It pops in with the related videos and stuff, and it doesn't feel like a premium service despite the fact that the streaming is pretty nice. Right? So I began to think, okay. I I need a new video host. And believe it or not, switching off of YouTube has been a priority of LevelUp Tutorials for maybe a year now. It's been a year in the making of evaluating different streaming services, different options, and there is a huge range from fully hosted, fully managed CMS style video hosts all the way to 100% API driven technical based things. And we're gonna talk about a lot of those options in this video or in this this podcast. But there's a huge range of, basically, how much you have to do as a developer Vercel your abilities to drag and drop things. And I ended up trying about a whole bunch, briefly landed on Cloudflare as a solution and have since moved to mux.com.

And, once we go through everything, I'll talk a little bit about why I made that decision and what my stack is looking like these days. And, since we have launched the the new video player already with 1 premium series, I'd say, so far, it's been a success, and I'm very, very happy with it.

That's awesome. Let me give a quick rundown of my setup as well. So I started on Wistia way back many, many years ago, and that got expensive really quickly because Wistia is a it's more of like a marketing video platform. So it's more like a drip or convert kit for video where the tools are used to capture email addresses and upsell people. So I moved off of that because it was getting way too expensive.

And then I moved to Vimeo, which was, like, their very free plan, or they're, like, $200 a month on or a Yarn. Sorry. $200 a year, and it was unlimited.

And it was working well for a long, long time. And I think about a year ago, they started to crack down on tutorial creators, because there's something in their terms of service that says if you make everything private and you don't make your videos available on Vimeo Scott, which is what I was doing, then you have to do a custom plan.

So I have to pay, I don't know, 6 or $7,000 a year to host my video. I could actually bring that down quite a bit because my free tutorials are are a majority of that. And I could have my free tutorials on a a regular Vimeo plan and make them publicly available, and then I'd be allowed to embed them. And then my paid ones, I would have to to pay by the bandwidth for them. But I opted just to pay the bill and keep going because they sort of sprung this on me and said, hey. You have, like, 4 days, which was kind of a not a cool move.

Let's, let let you, redo your entire platform in 4 days for just a money. It's like a distortion. It's like a shakedown. Yeah. No kidding. So they they said, like, hey. You gotta pay for it. So I ended up just paying for it because I have bigger fish to fry, and, it works pretty well. You can customize it all you all you want. But in the process of doing this, I did go through quite a few of the these possible options as well. And I most of them, I just kinda looked at the into them at a high level and said, that's too much work for me right now. Mhmm. And I'm gonna wait until I'm gonna do what Scott is doing, and I'm glad that Scott did it first because now I get to learn from them. I can give you all of my notes.

Yes. Because there is a lot of of notes here. And I went through I really went through the wringer of trying several of these different ones and and and really got my hands dirty. So what we're gonna be doing in this episode, I'll give you a just a slight background on some of my history with video because I I think that might be important, some terminology.

And then we're gonna talk about some of the formats, and then we're going to do a roundup of players as well as Vercel, a service roundup. I even have a little horse emoji in here, and then we're gonna talk about the stacks.

So first and foremost, my started video editing in in middle school. That was, like, before coding, before anything. We were making skate videos. I got an Imac just so I could use Imovie and edit skate videos.

I worked professionally as a video editor and a production assistant for Guitar World and Future Music Magazine, so I have worked, motion graphics and video editing professionally.

For one of my jobs, I created a specialty Flash player, that kept 2 videos in sync for use of slides and video feed professors giving lectures, and we sold that as a service. And, I've been hosting and recording video, content ever since the start of my web career. So that's my brief background into what I've done in video. It's mostly on the production side of things rather than on the encoding and technical side of things, and now I'm having to learn a little bit more here. So some terms that we might talk about besides the formats here, transcoding, you'll hear the word transcoding, and that's really just a a digital to digital conversion of 1 format to another.

Let's say you have a video that is produced at, like, an MP 4 file, and then you upload it to one of these Vercel, it becomes one of these fancier formats like DASH or or HLS or WebM or whatever. That's going to be a transcoding operation. There's also the word ingest. If you're looking at any of these services, they frequently they all just use the word ingest everywhere, and ingest apparently comes from my understanding of the history of the word, it's like when people were to bring media from one location to another, like, oh, let me bring these canisters of film over. And, like, the process of accepting them is an ingest process.

So they typically say, like, the ingest process is is basically uploading the video file or data to a server so that it can be then coded and then streamed.

I believe we've called that slurping up previously.

I believe we have used the technical term slurp to describe the ingest process, and, maybe we should petition to get that changed because I do like slurp.

And so you'll hear these 2 terms a lot, especially when you're doing the research, and just know that that's sort of the process. Right? The videos have to exist somewhere. They have to be ingested somewhere, then they have to be transcoded or encoded to become another file, and then they have to be served and distributed.

So there's a whole lot that goes into it beyond just video file on server, hit play. Right? So that brings us to the next topic, which is streaming versus downloading.

We've talked a lot about this, in other contexts, but it should be pretty straightforward if you think about it. Right? When you stream things, you're basically sending chunks of it along down the line at a time as the user needs it. Right? Where with downloading, you download the entire file, the files downloaded, and then you're able to play it.

That brings us to formats.

And the formats here largely are about downloading Vercel streaming. Because many times people say, alright. I wanna have a video playing on my site. It's just an m p four, whatever.

Is that good enough? Well, it depends on what your your goal is. If you're doing, like, a video tutorial streaming site or something like that, you're gonna wanna go with streaming. Now if you've ever been to Scott in the past, I had this video of me dancing, b boying, breaking in the background of the that, and that was perfectly fine as a video file or a WebM because it's just like an asset. Right? It's being used JS, like, an image. And in those cases, sure, download it. It's a small video. But if you're gonna be doing any sort of video streaming or, you know, video hosting to the point where people are gonna be watching these videos, you're definitely going to want to stay away from, like, download an m p 4 or download an WebM as a process.

So an MP 4 is a wild format that's been around for a while now and, includes both, I believe, video as well as audio.

It is a complex thing that you don't really need to know too much about other than m p 4 is a video container format.

It's, like, one of the the most standard used formats essentially in the world.

I watched a really good conference talk about how MP 4 works and how the compression works.

It was unreal to hear it, and he talked about, like, you know, sometimes you're watching a video and part of the screen goes green for a second, and it's it's usually where someone had moved. And he explained, like, how why that happened and what was missing. And I'll see if I can find a link to it because it was super like, I'll never care really all that much about compressing MP fours via code, but he explained it really well.

Interesting. Yeah. I would love to have that. MP 4 is, again, just basically a the most standard video format that exists.

And if you just reference an m p 4 inside of a video tag, it's just going to download and play that video. Right? And likewise, there's a WebM, which is a newer format. Now WebM is an open source royalty free format. So, of course, you know Apple is not going to be on board, because that's how Apple does things. So WebM is not as widely supported, but gives you much smaller file sizes and is probably, like, a good alternative to using an MP 4 in certain situations.

That said, again, the Bos bit of it and not working on Ios is probably a big problem. And so, that's largely why when you see videos, they're offered in multiple formats, sort of like how Cloudinary does it. You know, in fact, Cloudinary can do this where they can give you, like, an MP 4 on, like, Bos and then a WebM on Android or anything else that supports it.

So those are these 2 sort of base formats, I wanna say. But we get into these these, like, more adaptive streaming formats, and they're a lot more interesting, in my opinion.

And we have 2 of them that are competing against each other. One is called Dash, and it's the newer format. And then there's HLS, which is Apple's owned format. Now Apple owns HLS, and it has been around for longer and has much wider support.

So from what I'm reading, and I'll link to this blog post in the show notes because I don't know how how much bias is in this because they say, basically, that Dash is the better format, but HLS has been around longer, has wider support.

Therefore, well, you'll see HLS in more places and Dash in less places. If you've ever seen, like, you've right clicked a video

in Chrome or whatever, and the source of that video is, like, blob, and it says blob colon// I always wondered, like, what what that was. And I was on a call with the the guys from Mux a couple months ago, and I said, like, what is blob? Like, do, like, do you do that? And he said, it because a lot of browsers don't support HLS.

But if the feed is being served up in HLS, what needs to happen is in the browser, you need to hot potato transcode that from HLS into the the blob format, which then can would then can be played back in a video player, which is kinda kinda interesting.

There's a lot of weird intricacies within all of these various formats and how they all relate to each other and, what's supported and what's not supported, which is one of the reasons why warp this end of this episode, you'll hear me recommend not Mhmm. Rolling your entire own from scratch. There are some complications there. But yeah. So here's a little paragraph that I'm seeing. HLS is the only streaming currently supported on Bos and is supported natively within Safari.

As of 2016 okay. So that's maybe not relevant.

Edge could play HLS natively.

So I wonder if Edge still can play HLS natively now that it's on Chrome. Let me check. Can I use? By the way, HLS stands for HTTP live streaming, in case you wanted to know what that stood for. So it looks like HLS does not have native support on Chrome, Firefox, Edge, Internet Explorer, Opera, Opera Mini, or Firefox for Android, but it does work on Safari, Bos Safari, Android browser, and a whole bunch of others. That said, HLS is still the preferred method because if you'd look at can I use and then type in dash, it's all red? So so, obviously, neither of these are going to be the most widely supported things. You might think, well, okay. If they're not widely supported, then how can we use them? Well, you can use them again through essentially the use of JavaScript.

Just because that's not natively used doesn't mean that it's not possible.

Yeah. That that's what that hot potatoing is what I just said. Right? I'm just looking at at what is actually doing that, and it looks like HLS dotjs is the library.

And and it seems like most players, like Video JS and Flow Player, things like that, just use this under the hood. Oh, I always say under the hood. I gotta stop saying under the hood. They just use this library to convert it in the browser so you can play it in any browser, which is kinda cool. And there's this whole Scott 3 u eight

file extension, which is essentially, basically, just giving you rules of it being like a playlist. Like, here's a playlist of a 100 clips of a file. Right? And so the way these things largely work is that they're like with a normal download file. Right? You download the file. You play it. With these streaming services, what they do is they're downloading it as it's Node, but because they're downloading as it's needed, what they can do is change the, actual video file segment. So you could think of it like this. Let's say we had, like, 5 video segments. 1 that's a 10 80, 1 that's a Wes, and this is the resolution. 1 that's like a 400 whatever, one that's like 4 k. Let's say you're streaming it, you're watching it, you're at the 10 80 p, and all of a sudden, the next chunk is coming up and you're getting really good download speeds, what this can do is bump up to the next one or the download speeds are not so good for this next one, so maybe it bumps down.

Basically, you could think of it JS, like, a series of chunks.

Maybe it's like a train track. Right? The train's cruising on the 10 80 p, and then all of a sudden, though, there's less resistance Sanity can go up to 4 k. And now all of a sudden, there's more resistance in the network, so it can go down and switch the track again. So it's basically these various tracks that you can jump between in a series of sequences.

And that basically, it's always going to pick the highest bit rate possible in the downloaded time. So so while it's downloading, it's always going to pick the best format that it can or the best, resolution.

Yeah. If you ever, have used YouTube DL, which is a little command line thing Mhmm.

To download, YouTube DL is awesome. Like, pretty much any website that stream shows will allow you to download them for offline.

YouTube DL is amazing. Yeah. Specifically, I use, HGTV.

Me and my wife love watching renovation, whatever, house hunters, and we download them so that they don't have to, like, stream or buffer or throw ads and things like that. And I use YouTube DL and just point it to the URL, and it downloads that m three eight u. Yeah. It downloads m three eight u, opens it up, and inside of there, there's hundreds of pieces. And then it downloads each of those pieces for you and then puts them back together.

Yeah. Yeah. It's wild. Right? It's very complex. And when you think about, like, trying to do all of this yourself, you think, oh, boy. Especially when you get into having to create those things yourself, create those manifests, create those playlist, create all those videos, all of that transcoding.

What does that look like? Yeah. So we'll get into that a little bit. Before we get into players, we're going to do a quick ad break to talk about one of our sponsors that actually, believe it or not, has a a video plug in that uses the surface that I mentioned, Mux.

So with more on Sanity dot I o is Wes.

Yes. So we had our huge show on, headless CSS a couple couple weeks ago, and people loved it. It's actually one of our our best viewed shows lately. People loved hearing all the ins and outs of of how everything works. And one thing I didn't say and didn't know about Sanity is that they have pay as you go as well ESLint addition to the plan. So if you're looking at it, you say, I just wanna pay for for my usage rather than getting a specific plan, you can do that. So if you are building a project and you need a back end for it, check it out at Sanity/ syntax.

That's gonna get you double the free usage tier. Thanks so much to Sanity for sponsoring.

Cool. Let's get into the players section of this. There's a lot of players on the Wes. So if I'm missing any, please let us know. There are just so many here. Have you ever heard of Shaka Player? That was one I had never heard of until I started this hunt.

Shaka, s h a k a. From Google? Yes. Exactly. I was gonna say, you'll notice a a certain company has created Shaka Player. Shaka Player is the dash and HLS client made by Google. It's a JavaScript based player. It has a really, dope hang 10 logo, which is like the Google thing, but in, like, a hang 10 hand, which is kind of fun. Or I guess JS do people call that the Shaka hand? I guess they do. I've always just known it as hang ten. Hang 10. Yeah. Yeah. That's it's pretty dope. It seems to work on just about everything.

I have not used this, but I did I saw it in a video talking about the video format. So they're like, we're gonna use Shaka Player. I was like, what the heck is Shaka Player? So this seems like a pretty cool option here. It supports just about everything you could imagine it's supporting, and it looks pretty cool. So, I haven't used Shaka Player, but it does seem like a great option for those of you looking. There's also HLS JS.

HLS JS, what I saw was maybe created by a Dailymotion. I saw a Dailymotion had a fork of it. If I'm wrong on that, I there's a very well there's a chance that

this exists before that, but I did see daily motion had some sort of a fork of this HLS It looks like Dailymotion made it, and then they put it in their own GitHub repo because it's it seems like the entire industry is using HLS JS, which I don't think that this is a player. It's just a library to stream into a video element.

Yeah. Right. Because they even use Mux as as one of their examples here. Well, Mux, you need a player. But here's a question from the the perspective of our audience. Why do you need a player? Like, why can't you just use a video tag and and then style it and add your buttons as you want? Because,

specifically, like, when we were talking about those formats, the HLS and DASH, they're not going to be supported in just the HTML image format. And then you're gonna be stuck essentially just downloading the video and not getting the streaming stuff that we want to stream.

And then things like Chromecast, Apple Play, DRM.

There's there's a Vercel different DRM things. Like, if you watch Netflix, that's just the HTML 5 video element. I almost said under the hood. I didn't. It's a HTML 5 video element under there, but they do use DRM, so you can't just save the Netflix video from there. So your player has to know how to how to work with that. So I think in in most cases, same with, like, like, bandwidth as Wes. The the HTML5 video element won't ask for a lower quality bandwidth if Internet is being slow, that's something a custom player will do. Right. So that's really that all comes down to the formats. Right? I mean, that can't happen without an HLS or a DASH

format coming in.

Yeah. The player itself under the hood is really, like you mentioned, a video element. Okay? So there is a video element in there. If what you do is you open the the driver Node door, you reach in by the footwell, and you pull the little handle, and the hood kind of pops up a little bit, and then you walk over to the front of the car and get your hand in there and and flip the lever and then lift it up. So once you're under that hood, that's when you're going to see very specifically that there is a video element in there. So that that works how you'd expect it. In fact, actually, that video element is one of the the reasons why I had to move off of Cloudflare.

We'll talk a little bit about more about that later. But some other players, just to breeze through these, are dash dotjs, which is the dash industry forum, dash dotjs.

There's also video at JS, which is the one I went to. Video dot JS is a very mature video player that's been around for a long time. Has a big community, tons of plug ins, tons of themes, those kind of things. Definitely a bit of a PIA though to get set up JS in it was a pain in the rear end. It did not it was it's not exactly the easiest thing. There's also j w player, which has been around forever and ever and ever. And if you haven't been to j w player lately, Wes, go to jwplayer.com and, kinda be like, Wes. This is different.

Yeah. I remember JW Player being rounded corners and gradients, like, when that was that was really cool. Just like a player, though. And now it's now there's solutions

and products. Oh. It's They went corporate on us. It's very corporate. But, no, it's pretty dang nice. In fact, JW Player, believe it or not, is one of the streaming services that we're gonna be talking about because it used to just be player tech. Now it's a whole streaming service they they monetized.

It looks pretty cool, actually. Not one that I've really checked out too much, but it definitely looks pretty pretty cool. There's also Bit Bitmoven player. Have you heard of Bitmoven player? I have. Pretty sweet name. Bitmoven is a big, big encoding company. They do a lot of big stuff. We'll talk about them in the services. They have a player. You have to pay for it. There's a monthly fee to use their player. Looks pretty nice, though. There's also Ooyala, which, I didn't realize JS Brightcove's player.

I don't know why Brightcove named their player. Oh, I wanna say oolala, but it's oolala.

Oolala.

I like it. Yeah. Yeah. It's it's a fun name. I wish I could say it better. It's not great for dyslexic folks.

But, yeah, Ooyala. Is this even yeah. Because ooyala.com redirects to Brightcove. So maybe it was formerly Ooyala, and they may renamed to Brightcove because I don't know. I'm I'm speculating here. Either way, Ooyala is a player. There's also a player called Theo player at eoplayer.com.

This is not one that I had seen before either, but looks like it's very widely used.

They make the bulb clean as the number 1 video player worldwide because it's used for BT Sport and BC, CNN, Vodafone, all these things.

So that is the players.

Now let's get into sort of the meat and potatoes of some of these services here. We're cooking up a stew.

We got the meat and potatoes here, and that is going to be the services roundup.

I feel like we need some roundup sound effects that whenever we because this is now the 2nd roundup in a little bit. And maybe we could have a little roundup thing. Round up. And then, like, you know, we could have some horses stamping stamping around and stuff. Okay.

I'm getting off course. So Vercel.

I have ordered these in the listing of I have technical difficulties as the header, but I've also, thought about naming this user misery because I got that term from Stripe's new Stripe has these new performance metrics, and they they they have, like, your routes. Each of your routes has a user misery rating, and I think that's hilarious. It's like, alright.

If x, y, and z number of users warp having issues, then that this is a high user misery route.

So rating these in terms of the easiest to get set up to the hardest to get set up and with some caveats here. And, obviously, there's a lot of these services, so we may forget some. Number 1, YouTube free.

Congratulations.

It's free. 3.99. It Scott nothing to get set up. It's the least professional.

It's the easiest to do. They have all the tools you could possibly need, but you are also supporting the giant behemoth of that is YouTube.

So

yeah. Next 1 is I'll do Vimeo because I Node that. The cost JS, even, like, like, straight up, I know I'm paying a lot, but I did all of the math. I talked to some guy on Twitter DM ed me, and he works for, like, a massive porn site, he said. And he gave me, like, this, like, spreadsheet of all of the research that they've Deno.

And, like, he looked into every single player. And there was there was hundreds of players I hadn't even heard of before. Academic paper. Right? Like, I found this when I was just googling. I was googling around, and there Vercel some academic paper about the cost of all these streaming Vercel, and it was a really helpful table.

So the Vimeo still came out cheaper than the raw bandwidth from a lot of these these companies, and that's why I ended up not doing it because even looking at something like Mux, there's obviously other upsides to to using Mux. But for me, I was just looking at the raw bandwidth cost and then having to code my own player, and it was still cheaper to just use Vimeo, which comes with player player and transcoding and and everything, as well. So very affordable, especially if you Yarn making them publicly This

Node the $1 sign option

Wes it's like a fixed cost. You're paying the cost, and then and that's just what it is. It's Scott a fixed cost for me. It's Oh. I pay by the terabyte. Okay. Yeah. But most people, unless you're doing private video streaming, like, of course, like I am, you have you have to pay for that. But if you're if you're just, like, uploading videos or whatever, yeah, then it's a fixed cost.

So next up is I have this as a $2 sign. These things, let me tell you, are kinda hard to really quantify in terms of pricing. So this is probably going to be a more expensive for you version, but most of the services will fall into this category in my my, experience. And this is Mux.

Mux is used by Vercel, v s c o, or do you call that Scott? V v vis v vis VSCO. Yeah. Do people actually say that? Robinhood and Vercel up tutorials.

Mux is a pretty sweet service. You could think of it as sort of like, you could think of it JS, like, video on demand Wes you ask for something and it transcodes it on demand for you. So that way, you're not, like, hosting a bunch of video that people aren't watching. Right? You're not creating a a 1,000 streams and having to pay to host those.

Let's see what the pricing is. It's basically okay. This is tough to calculate here. The pricing is 5¢ a minute for each video watched or for I'm sorry. For that's that's for encoding, not for watching. 5¢ a minute for encoding.

Point 3¢.

So 0.3¢ a minute for storage per month, and then 0.13 cents per minute for streaming. And they have this interesting little calculator on their pricing page Wes you can say how long is my average video. Okay. My video JS 10 minutes long.

I upload, like, 25 videos a month, monthly video view count. I don't know. Either way, it's calculating to end up being under the $500 range, somewhere in between that. But this is a professional service. I probably I have not gotten a bill yet, but I'm probably not going to be paying a ton JS this is. I'm I'm slowly adding my library there instead of just, like, tossing all 2,000 of my videos there at once. So we'll definitely see as the cost grow, but it's definitely a good solution because I think for the most part, the costs are gonna be pretty close to what I'd be paying at other services to get the same sort of stuff that Mux gets me. But Mux is a developer forward sort of experience. That said, I did have to write my own uploader function. There's no, like, UI to upload a video, where some of these do have a UI to upload a video. So because of that, I did give this 2 user misery or technical 2 crying faces technical to want to use this. That's not bad, but you still have to write your own uploader. Right? Yeah. Next 1 we have here is

Wistia, which they have plans.

The kind of person that's using Wistia is gonna be, like, like, a real estate agent or, like, a SaaS software Wes they have, like, a one of those, like, welcome to our stupid product.

We love it. Like, you know, they an you know, they animate people on the screen and and things like that.

Not to say I don't like Wist yet. I think it's a it's actually an excellent product. Excellent product. Yeah. It's just very expensive. So I'm just looking at the once you go over the 200 gigs, which I would go over in a couple hours, it's 33¢ a gig. We're on I think on Vimeo, I'm paying 6. So it's almost 6 times more expensive than than Vimeo is on Wistia. So Mhmm.

And, like, I've had calls with them, and they can bring that down if you're doing the amount that I'm doing, but nowhere near, what Wistia does. But it's great for if you're trying to collect email addresses and sign up. I think even Egghead uses Wistia. I'm not sure if that's still true or not. They use Bitmoven.

They use okay. They moved over to to Bitmoven.

I think if you use Teachable, they use Wistia, and they they foot the bill, they said. They tried to get me to move over there, and they said, we'll foot the bandwidth bill. But Both love. Yeah. Scott I'm not moving off of my own platform. I know that. Wistia, pretty good option. Just expensive.

Yeah. Lots of control. Yeah. Totally. The player's really nice too because you have a lot of customizations there. Yeah. I really like Twistia when I did the demo of it, but, yeah, the pricing is just not possible for what we're doing. Next up is Cloudflare. Cloudflare actually launched a video product. I'm not sure when.

And I briefly was going to be all in on the Cloudflare product because the pricing was pretty good.

The technical difficulty aspect of it was pretty good, in fact, to upload your things. I actually I actually thought the interface for uploading a bulk uploading videos was better than YouTube's.

It was very fast, very simple, and you could just drag a whole bunch. There's a UI. You just drag and drop, upload, change the names, whatever. I hit the API. I import the videos, and I was so close to launching with it because of all of that. And then I started to get second thoughts because here's why.

CloudFlare requires you to use their stream element, which is not a real HTML element that CloudFlare has just created themselves for some unknown reason instead of using the video element. So you use the stream element. And guess what? That means that if you want a custom player, which you do, okay, you do want a custom player because if you just use the browser's built in one, you don't get access to Chromecast, which is number 1 feature I wanted, or AirPlay. Right? You don't get access to those things. So what do you have to do? Well, you have to write your own player. Why? Because they use the stream element. It makes it and so it doesn't work with any of these other player options. What is a stream element? It's just their own thing that they made up, and therefore, your linter gets angry.

Everything gets angry, and you cannot use Video. JS, or you cannot use these things because it's, like, looking for the video tag. They gotta be

sending something that can be understood by the browser.

I mean, they just don't they don't surface it. They don't. So that looks for the video streaming element, and then their JavaScript does all over the bits to turn a change up. But either way, it doesn't play nice with anything. So I was, like, coding my own player with Framer Motion, and I spent way too long on it, and I got really far. And then I just, like, okay. Now I gotta add Chromecast, and I gotta add this. And then I was getting bug reports, but Node working right on some browsers. And I was thinking, what am I getting myself into? Is this something I really want to do? Yeah. Coding your own video player is tough. I know. And then just at the end of the day, I was like, you know what? This is not something that this is making my life more difficult.

So I I dropped it and went with Mux so I could use player JS and some of those. Okay. Next one is going to be JW Player, which we talked a little bit about. JW Player, I have no experience with them. In fact, I thought they were just a player until I started compiling these notes, and then I found out they do all of this other stuff Node. JW Player apparently has a streaming video delivery service, live streaming, hosting and management, video monetization.

Looks like they have, like, ad solutions.

This thing looks like pretty crazy. It seems like they have a lot of different services.

But to get started, for a 150 gigabytes of hosting and 500 gigabytes of streaming, it's only $10 a month. And you even get password protected sharing too. I don't know, how that works with embeds or something if that's just, like, their own u URL.

This is a pretty sweet deal. I I don't know enough about this to, like, really dive in here, but maybe, you wanna check it out at least, jwplayer.com.

Looks like they do they do stats as well. Like, that's something we're not talking about either JS that a lot of these services will give you really good stats about Oh, yeah. Countries and plays and where people drop off on a video and and things like that. And then other solutions are just raw raw bandwidth at the end of the day. So that's pretty cool, Jay. A lot of them on Lair. You'll have to, like, opt in to

those data services.

Mux has some really good video data as well. It's Mux data is pretty pretty slick.

Okay. So next step is Cloudinary, which I had quite a bit of difficulties getting Cloudinary videos to ingest.

They would or if I did ingest them, I would specifically ask for a version of the video, and it would just not work. It'd be like, Deno. We don't have it. And so I had a lot of issues getting the Cloudinary's video uploading to work the way I wanted it to, and there were some restrictions. It was so funny because we had found a bug. I forget what it was. We found a bug with our video player using Cloudinary.

And our, developer, Eric, he reached out to Cloudinary to say, hey. What's the matter with this? Why won't this reformat? Why won't this change? And they're like, well, some videos, like, of Wes a certain size can only be modified in these ways if they're uploaded via these manners. It's like, Wes, well, yeah, you you the documentation's don't, like, tell you that kind of stuff. And and, like, if I get a video into Cloudinary, it should just work with all of the features. Like, I shouldn't have to do things a special way to get it to work. But Yeah. That always bums me out when, like, companies make something

so simple, and then, like like, the cloudinary images just slam dunk, home run, slapshot, and they killed it. And then it sounds like like the video stuff is is not as easy.

I always like, ah, like, I want you to be what you are for your other thing for the everything else in my life. Totally. It's not necessarily always the case. I I looked at so many of these services only to find, like, some of them were just, like, a couple of ticks in the user friendliness

side over, and they would have been a, home runs grand slam snapshot. I mean, they would have been there's so many of these that that, like, come so close to greatness in terms of, like, getting the UI dead right or the user experience dead on. Yeah. In the in the same Almost a touchdown. Almost a touchdown. Almost a double touchdown. And That's something. So it's no. Node.

1 the double one time I was at a a U of M football game, and we were losing to Minnesota, which is crazy considering, like, Michigan versus Minnesota should never be that close. Tell me about that. Losing by, like, 40 points or something. And my my buddy who I was with was, like, not into football at all. And he was like, woah. We could really use a double touchdown right now. I was like, what's a double touchdown? He's like, oh, you just get 1 touchdown, but they give you 14 points instead.

That'd be great.

So, like, there's so many of them I'd you know, I'd contact the customer service. I'd be like, how do you do this? They're like, you don't. You've Scott code your own. I'm like, okay. Why don't you just go that extra step? You know, why don't you go go the extra step? Okay. We have more to go through, which is one of them is Brightcove. Brightcove, we used at Ford, so I'm used to using them a little bit. But, again, that's probably not one you're gonna wanna use for anything like what we're doing. But if you're the type of person who is looking for, like, a video streaming service, you could imagine, like, how it's being used on ford.com, show clips of the cars, go for them, then that is going to be the, the right kind of solution for you. Also expensive, but definitely a little bit more handholdy.

There's also things like I have these next 3, which are a little bit more technical, which is Azure, Bitmoven, and AWS. So Azure is Microsoft's cloud platform.

I got as far as setting up my workflow.

I had the encoding process set up, and then, like, their player's garbage. Sure.

They're trying to get you to use the Azure player, which is is trash.

For the most part, I had, like, I didn't wanna get into the DevDocs for it, but the the interface stuff was just okay.

Not very good. Bitmoven JS very technical. So if you look at Bitmoven, you say, okay, Bitmoven, this seems like a great great idea. Just know that you have to basically write all of the ingest stuff Vercel. Or, like, for instance, if you wanna connect to an s three bucket, which is what you have to do. The videos have to live somewhere, like, in an s three bucket, Then you gotta connect that to Bitmoovin. You gotta write your own serverless function to do all of that. It's like, okay. Well, what? Maybe you could, like, hand hold us to just say, let me log in. Let me give you some access keys and then select the bucket and click go. No. It can't do it that way. So you have to do quite a bit of your your own stuff. But if you wanna save money on pricing, you're a bit more technical, you're a bit more developer minded, something like Bitmoven is a really good Node. They have a lot of really awesome encoding stuff. Their encoding tools are really great. The that's analytics are really great. That said, it was a little bit less handholdy than I wanted. Not that Mux was handholdy, but it was definitely easier to get up and running with and get moving. Lastly, I have AWS JS a, a whopping 5 crying faces on the technical difficulty side of things.

And I use this VOD on demand workflow, which never ended up working. Just to give you an idea of what this video on demand workflow actually does, because with Amazon, it's never like, here, let me do this one thing. Let me do this one thing that does another thing that does another thing. So the VOD on demand basically sets you up with a s three bucket, a elemental media convert, AWS Lambda functions, notification service, and a CloudWatch, as well as a database with DynamoDB. And what this does is you create a folder within s 3, a bucket, so to say. You put your videos in there. You have a watch service that looks for that bucket, looks for anything added to that bucket. If anything's been added to that bucket, it then runs through this transcoding process and spits out all of the files into their formats into another bucket with their various formats.

And those formats in that manifest and metadata is all collected in a database, and then it's all served through CloudFront, their CDN.

I had major issues with this process. It didn't work. They made it seem like it was like a one click, get up and running with professional VOD.

No. And for the most part, I talked to a lot of people who had the same experience.

There were definitely permissions, keys issues. There's a lot of things. There's a lot of things that talk to one another. So unless you're an AWS person like, if you're an AWS certified whatever, you have a lot of AWS experience, you're very comfortable in AWS, this is probably the best one for you to use because it's probably going to be probably the cheapest because it's the closest to what do they call it? It's closest to the, doing it all individually, raw chunks Vercel.

To the metal. Closest to the metal. You want? Yeah. That is what I want.

I wouldn't be surprised if a lot of the services that we're we're talking about today actually just use Amazon under the hood. Yeah. It's like JS a utility company. Yeah. I would imagine a lot of them do or Azure

or, Google Cloud because I know Mux has their data stored in the Google Google the Google in the Google Cloud, but their transcoding is done, I don't know, by themselves or something. I'm not sure. So don't don't quote me on any of that. Either way, that's a rundown of all of these services.

There's a lot of services.

Before we we get done with this this bit, let me just talk briefly about why I chose the stack I chose. And before I let you know exactly what I chose and why, let's talk about one of our sponsors, and that is FreshBooks today.

FreshBooks .comforward/ syntax is the URL that you need. If you are a small business, you're a freelancer, you're just billing someone and need to make a quick invoice, send it over, and keep track of it. Don't go into Microsoft Word or whatever to make your own, and you'll never be able to to keep track of that. You need to sign up for FreshBooks and use that to send out your invoices. It looks super professional. You can log all of your expenses in there. You can do your billable hours. You can you can input expenses and then convert them and just immediately turn them around and build them for clients. I've done that with, flights before. So, like, I paid for the flight myself. I put it in as an expense, and then I turn around immediately and then bill the person running the conference for that thing. So pretty, pretty cool. Check it out at freshbooks.comforward/ syntax. Use syntax in the how did you hear about us. That's gonna give you a 30 day unrestricted free trial. Thanks so much to FreshBooks for sponsoring.

Let's hear about why and what

did you end up doing? What is your stack? Yeah. So through the course of this, I signed up with accounts at Vimeo, Mux, Wistia, Cloudflare, Cloudinary, Bitmoven, and, AWS and Azure. So I've really tried all of these with the exception of Brightcove and JW Player. I ended up going with Mux for my host. It's developer forward. It was easy. It worked. 1st try, I created a video uploader with help of, with the help of Upchunk, which is their own chunking uploader that the Mux folks created.

And the code was not too crazy. Basically, I just got my key from the server. I was able to with with that key on the client side, basically, hit mux with Uptrunk. I just paste pnpm, essentially, a URL with Uptrunk. Here's the video file, Went through it. Did its thing. And then I wrote some pulling to hit the Mux API to say, alright. Is the data ready yet? No. Is the data ready yet? No. Is the data ready yet? Yes. Okay. It is. Okay. Let me get that data. And that's really what I did there. You can also do it via webhooks, but the pulling worked fine for me. And that, you know, it's ease a little bit easier to troubleshoot, I think, because sometimes I get, nervous with Webhooks. For some reason, even if code hasn't stopped working, I'm like, is the is the Webhooks still working? I don't know. It's not as transparent.

I also went with Video. Js for my player, mostly just because there's a lot of people using Video. Js. There's a lot of plug ins. It was fairly easy to get Chromecast up and running on this thing and includes all the goodies and all the things you'd come to expect. Not to mention, there is theming. A lot of the CSS I found to be very, very difficult to work around.

But once I I figured it out, I was able to create my own theme. My own theme, which, by the way, is actually even connected to our theming system. So it works.

It, like, changes colors in dark mode and OLED mode and whatever. It's actually, like, themed with the site. So it's pretty cool. I got my own custom player. It looks nice. All the functionality I want, video Scott j JS, and, that's really it.

That's all I did here. Mux Video JS is where I went, and so far so good. I launched 1 series with this and have not had any complaints so far.

Nothing popping up in my century, so I feel like it's been a success so far.

Cool. Well, we'll have to do, like, a, like, a 6 month update Sanity on on how it's going and and whatnot because I think there's a lot of people that ask these questions, especially, like like, you can start up a video streaming thing and use a service. But then as you want more control and cost alone, then it's worth looking into one of these. So thanks for showing us all that. What about some sick picks today?

Sick picks. I have a sick pick. It's a podcast that I've been listening to, and this is going to be not a podcast for everyone. I'll tell you that right now off the bat. But this is a podcast I really like, and it was only on Spotify before, and they have since moved to everything, so I can finally recommend it.

This is for those of you who are into fitness. If you're into fitness and you're into mobility, stretching, flexibility, this is gonna be for you. It's called Flexibility Focus, and it is a science based flexibility podcast. I love my science based fitness podcast, and this one is basically this very smart guy who who does a lot of stretching stuff.

That is the best way I can explain them, but, technically, he does stretch and stuff.

This guy who's very, very Scott, basically talking about medical journals, evidence based stretching things, and it's a little dry.

And it's long, and it's very technical. But if you're into flexibility, stretching, whatever, I just this is one of my new favorite podcasts for for those reasons specifically.

He he he just really he has really opened my mind to some things within flexibility, which is something that I am particularly interested in. I'm gonna sick pick another YouTube channel. This one is

mostly focused on motors, like, not electric motors, but, like, gas motors and engines, things like that. And he does a lot of these. Like, he'll find, like, a weed whacker on the side of the road, and then he'll it apart and show how to fix it. Or, like, he found, like, this really nice fan on the side of the road the other day. Cool. And, like, the fan, it does, like, one of those where, like, the fan doesn't spin unless you flick the blade, and then it gets going.

And you try to fix that and, like, just lots of life skills to to learn in there. The the it's called the musty one. It's almost half a 1000000 subscribers. I've been watching for a few years.

Very enjoyable. Check it out. Youtube.comforward/mustyone, I think. Musty.

Musty?

Musty. Musty. Musty. Sanity.

Shameless plugs, Wes boss.comforward/courses.

Check it out if you wanna learn JavaScript, CSS, Node, React, you name it. Check it out. Use Syntax for $10 off any of my courses.

Also, head on over to level up tutorials.com, and you can sign up for a year, save some money. And the course this month is on CSS variables and creating a design system using just CSS.

We talk a lot about it. CSS core concepts, like things like how to properly utilize and access the cascade JS well as CSS specificity, all along with CSS variables, getting you up into the ability to write a really, really slick classless framework as well as components and elements for your entire application. So check it out, level up tutorials.comforward/pro.

Alright. Thank you so much for tuning in. We will catch you on Monday. Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop