Video for the Web 2020 and Beyond

but most of the services will fall into this category in my my, services roundup.

the $1 sign option 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.

experience. And this is Mux.

Node and user misery or technical getting the Cloudinary's

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¢ I think. Musty.

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.

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

like, a SaaS software Wes they have, like, a one of those, like, welcome to our stupid product.

addresses and sign up. I think even Egghead uses Wistia. I'm not sure if that's still true or not. They use Bitmoven.

are are a majority of that. And I could on Twitter DM ed me, and he works for, like, a massive porn site, he said. And

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.

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,

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.

started on Wistia 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.

bring that down quite a bit because my free tutorials

on tutorial creators,

because 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/

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.

That's awesome. Let me give a quick rundown of my setup as well. So I

way back many, many years ago, and that got expensive really quickly because Wistia is a then you have to do a custom plan.

pay for it. So I ended up just paying for it because I have bigger fish to fry, 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,

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

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

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

have my free tutorials on a We love it. Like, you know, they an you know, they animate people on the screen and and things like that.

a year to host my video. I could actually

capture email addresses and upsell people. So I moved off of that because it was getting way too expensive.

Opera, Opera Mini, or Firefox for Android, for each video watched

And we have 2 of them that are competing 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 but looks like it's very widely used.

it because a lot of browsers don't support HLS.

But if the feed is being served up in HLS, 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

basically, just giving you rules of it being like a playlist. Like, here's a playlist of a 100 clips file extension, with their various formats.

and it has been around for longer and has much wider support.

essentially the use of JavaScript.

And and it seems like most

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

So from what I'm reading, and I'll link to this blog post in the show notes

in a video player, which is kinda kinda interesting.

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,

what needs to happen is in the browser, you need to hot potato transcode that from HLS into

in Chrome or whatever, and the source of that video is, like, blob,

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 Not very good. Bitmoven JS very technical. So if you look at Bitmoven, you say, okay, Bitmoven, notification

the the blob format, which then can would then can be played back 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

obviously, neither of these are going to be the most widely supported things. You might think, well,

and it's the newer format. And then there's HLS, which is Apple's owned format. Now Apple owns HLS, What does that look like? Ooyala, Video JS is where I went, and so far so good. I launched 1 series with this and okay. If they're not widely supported, then how can we use them? Well, you can use them again through 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

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

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

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 live streaming, in case you wanted to know what that stood for. So it looks like HLS

okay. So that's maybe not relevant.

does not have native support on Chrome, Firefox, Edge, Internet Explorer, 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.

streaming currently supported on Bos and is supported natively within Safari.

which is essentially, But, yeah, Ooyala. Is this even yeah. Because ooyala.com but gives you much smaller file sizes and is probably, like, a good alternative to using an MP 4 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

so,

and then, 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 on, headless CSS The kind of person that's using Wistia is gonna be, like, like, a real estate agent or,

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 sick of email, and they're attempting to roll out their own

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 As of 2016 Yes. Because there is a lot so I feel like it's been a success so far.

Okay. So next step is Cloudinary, 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 the right kind of solution for you. Also expensive, but definitely a little bit more handholdy.

they killed it. And then it sounds like like the video stuff is is not as easy.

those data services.

and even looking at something like Mux,

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,

That'd be great.

like like, the cloudinary images just slam dunk, home run, slapshot,

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.

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

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 pricing. So this is probably going to be a more expensive for you version, It's free. 3.99. It Scott nothing to get set up. It's the least professional.

1 the double one time I was at a a U of M football game, and we were losing to Minnesota, for maybe a year now. It's been a year in the making of evaluating different streaming services, different options, gigabytes of hosting and 500 gigabytes of streaming, that's That is royalty free

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

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

There's a lot of services.

Musty. Musty. Musty. Sanity.

Also, head on over to

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.

Head on over to syntax.fm To the metal. Closest to the metal. You want? Yeah. That is what I want.

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,

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

Node, React, you name it. Check it out. Use Syntax for $10 off any of my courses.

fitness. If you're into fitness and you're into mobility, stretching, flexibility, 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 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.

cost alone, then it's worth looking into one of these. So thanks for showing us all that. What about some sick picks today?

FreshBooks

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.

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.

Shameless plugs, Wes boss.comforward/courses.

mostly focused on

This guy who's very, very Scott, basically talking about medical journals, We'll talk a little bit about more about that later. But some other players, just to breeze through these, are dash dotjs, Yeah. Yeah. It's wild. Right? It's very complex. And when you think about, like, trying to do all of this yourself, better about my video solution. My current video solution was hosting everything on YouTube

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, That's all I did here. Mux This thing looks like pretty crazy. It seems like they have a lot of different services.

with the help of Upchunk,

which is their own So an MP 4 is

getting you up into the ability to write a really, really slick classless and then you're able to play it.

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 Yeah. Yeah. It's it's not just an app. It's like a whole ethos around

drop

motors,

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,

a video uploader with help of,

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

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, 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 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 Vercel.

level up tutorials.com, I don't know why Brightcove named their player. Oh, So

Check it out if you wanna learn JavaScript,

chunking uploader that the Mux folks created.

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 workflow Mux is a pretty sweet service. You could think of it as sort of like, write all of the ingest stuff Vercel. Or, like, for instance, Scott with 3 t's.

Very enjoyable. Check it out. Youtube.comforward/mustyone,

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

and you can sign up for a year,

for my host. It's developer forward. It was easy. It worked. 1st try, I created

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.

.comforward/

save some money. And the course this month is on CSS variables 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

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.

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, 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 But to get started, and creating a design system using just CSS.

with Uptrunk. I just paste pnpm, essentially, a URL we need I got as far as setting up my workflow.

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 I watched a really good conference talk about how MP 4 works and how the compression works.

expenses and then convert them

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.

Nothing popping up in my century, So this seems like a pretty cool option here. It supports

Cloudinary,

and just immediately turn them around and build them for clients. I've done that with, Me and my wife love watching

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 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 WebM on Android or anything else that supports it.

but it should be pretty straightforward if you think about it. Right? When you stream things, you're basically

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

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.

that kept 2 videos in sync for use of slides and video feed professors giving lectures, 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 first and foremost, my If x, y, and z number of users warp having issues, then that this is a high user misery route.

And then we're gonna talk about some of the formats, and then we're going to do email addresses.

maybe we should petition to get that changed because I do like slurp.

We've talked a lot about this, Cloudflare,

coded and then streamed.

For one of my jobs,

Let's say you have a video that is produced at, like, an MP 4 file, It is a complex thing that you don't really need to know too much about other than all along with CSS variables, 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.

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.

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 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, And I briefly was going to be all in on the Cloudflare product because the pricing was pretty good.

I believe we've called that slurping up previously.

Flash player,

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 if you've ever been to Scott 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

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.

somewhere, then they have to be transcoded or encoded to become another file, and then they have to be served and distributed.

operation. There's also the word ingest. If you're looking at any of these services,

in certain situations.

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 because 3¢.

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,

Bos bit of it and not working on Ios talking about the video format. So they're like, we're gonna use Shaka Player. I was like, what the heck is Shaka Player? 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 This is not one that I had seen before either, So next up is I have this as a $2 sign. These things, let me tell you, are kinda hard cloud platform.

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 for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop against each other. One is called Dash,

both, JS.

And likewise, there's a WebM, 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.

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?

That said, again, the I upload,

which is a newer format. Now WebM and, kinda be like, Wes. This is different.

or, you know, I believe we have used the technical term slurp to describe the ingest process, and, 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.

I believe, video as well as audio.

via code, but he explained it really well.

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, Mux has their data stored in the Google Google the Google in the Google Cloud, 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.

I'll never care really all that much about compressing MP fours And it was working well for a long, long time. And I think about a year ago, they started to crack down

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

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.

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.

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

Cool. Let's get into the players

renovation, whatever, house hunters, and

dot I o is Wes.

section of this. There's a lot of players on the Wes. So if I'm missing any, please 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.

Yes. So we had our huge show Peace.

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.

this hunt.

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

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

that you can jump between in a series of sequences.

we download them so that they don't have to, like,

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

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.

And that basically, it's always going to 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.

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.

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

JS Brightcove's 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 that is the players.

I'm getting off course. So Hey. I'm doing good. I went to physical therapy this morning. Got some electrified

I wanna say oolala, but it's oolala.

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

Now let's get into sort of the

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, okay. I I need a new video host. And believe it or not, switching off of YouTube has been a priority of LevelUp Tutorials to Brightcove. So maybe video uploading 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.

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, to really quantify CloudFlare

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

Oolala.

Vodafone, 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,

which, I didn't realize show clips of the cars, go for them, then that is going to be the, have not had any complaints so far.

YouTube free.

I feel like

meat and potatoes of some of these services here. We're cooking up a stew.

stamping around and stuff. Okay.

BC, CNN, in other contexts, monthly video view count. I don't know. Either way, it's calculating to end up being

alright.

player.

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.

all these things.

their CDN.

actually does, because 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.

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.

service, live streaming, hosting and management, video monetization.

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

and then it's all served through CloudFront, Edge could play HLS natively.

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

doing it all individually, raw chunks Vercel.

5 crying faces on the technical difficulty side of things.

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,

and a CloudWatch, Video. JS, or you cannot use these things because it's, like, looking for the video tag. They gotta be 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.

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

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

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

you create a folder as well as a database with DynamoDB. And what this does is

this seems like a great great idea. Just know that you have to basically And

5¢ some videos, like, which I had quite a bit of difficulties getting Cloudinary videos to ingest.

and Vercel up tutorials.

Vercel, 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, and, keeping it all private and then using some fancy API work to import it all into the site and then have them embedded.

like, 25 videos a month, 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 They make the bulb clean as the number 1 video player worldwide

a minute

Let's see what the pricing is. It's basically 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 So I began to think, because it's used for BT Sport and 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

okay. This is tough to calculate here. The pricing is is probably a big problem. And so, Musty? I created a specialty

Mux is used by Chromecast, which is number 1 feature I wanted, or AirPlay. Right?

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.

range, somewhere in between a wild format that's been around for a while now and, includes evidence based stretching things, and it's a little dry.

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

Wistia, which they have plans.

0.3¢ 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.

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,

2 crying faces This is for those of you who are into

under the $500

yeah. Next 1 is I'll do Vimeo because I Node that. The cost JS, HLS JS, which I don't think that this is

This

So

to just use Vimeo, which comes with player player and transcoding and and everything, as 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.

even, like, like, straight up, I know I'm paying a lot, but I did all of the math. I talked to some guy

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

and then having to code my own player, and it was still cheaper

of all of the research that they've Deno.

Yarn making them publicly 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

there's obviously other upsides to to using Mux. But for me, I was just looking at the raw bandwidth cost

well. So

he gave me, like, this, like, spreadsheet

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?

we've had HTML 5 video for,

and Wes Bos. Welcome

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, Yeah. If you ever, very affordable, especially if you

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

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

transcoding and encoding and live streaming and all that good stuff. So we're gonna attempt to break it down. Scott has gone through Let's hear about why and what

And anyone can put a m p 4 in a video tag, but there's so much more to it specifically around email where you can screen people whether they let them in. And it's just it seems like a different approach CSS,

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

by Sanity, which is a structured content CMS 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.

DRM.

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.

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, Point I have ordered these in the listing of I have technical difficulties as the header, but I've also, 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 then things like Chromecast, I have to pay, I don't know, 6 or $7,000 So maybe 5 or 6 years.

specifically, like, when we were talking about those formats, 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.

There's there's a Vercel different DRM

which is the dash industry forum, dash dotjs.

Apple Play, 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

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.

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 Everything gets angry, and you cannot use 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.

Yeah. The player itself under the hood is really, like you mentioned, a video element. Okay?

it's only $10 a month. And you even get password protected There's a lot of weird intricacies within all of these various formats in terms of, like,

bulk uploading videos was better than YouTube's.

The technical difficulty aspect of it was pretty good, in fact, to upload your things. I actually pick the highest bit rate possible

I actually thought the interface for uploading

requires you to use their 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.

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

sharing too. I don't know, how that works with embeds or something if that's just, like, their own u URL.

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.

sending something that can be understood by the browser.

Looks like they have, like, ad solutions.

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

stream element, which is not a real HTML element that CloudFlare has just created themselves or for I'm sorry. For that's that's for encoding, not for watching. 5¢ a minute for encoding.

for a 150 they frequently they all just use the word ingest everywhere, and ingest apparently comes from

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, and we sold that as a service. And, I've been hosting and recording video, a minute for or, Google Cloud because I know framework as well as components and elements for your entire application. So check it out, level up tutorials.comforward/pro.

a is an open source okay, you do want a custom player because if you just use the browser's built in one, you don't get access to if you wanna connect to

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

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,

HLS m p 4 is a video container format.

to stream into a video element.

I have not used this, but I did I saw it in a video 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 Congratulations.

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 storage per month, and then 0.13

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

a player. It's just a library

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.

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, 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 Scott with 3 t's. I got I got wes [email protected],

was Wes premium. 400 Wes.

tackling email. I don't totally understand it. Scott of like what inbox was doing.

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,

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 Sure. That's banking on that that could even spell my name correctly. Alright.

Yeah. So if for those who don't know, it seems like from the tweets, no not a lot of people know. Basecamp is

Yes.

like, marketers getting I I guess I do I do get a quite a few and it says blob colon//

because [email protected]

email address. So

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 what do they call it? It's closest to the, And those formats in that manifest and metadata is all collected in a database, Interesting. Yeah. I would love to have that. MP 4 is, again, just basically a the most standard video format that exists.

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.

API driven technical based things. And we're gonna talk about a lot of those options in this video

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.

And that is fine,

With both of our our platforms, we create video tutorials. Right? Node, 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.

service despite the fact that the streaming is pretty nice. Right? that's really it.

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 let's talk about one of our sponsors, and that is FreshBooks today.

there is a huge range from fully hosted, fully managed CMS style video hosts all the way to 100%

as a

I began having these thoughts of, like, hey. My entire business is video. I should probably be streaming the best way I can explain them, but, technically, he does stretch and stuff.

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.

but it's not the most legitimate thing in the entire world. Not only that, I do get v s c o, or do you call that Scott? V v vis v vis VSCO. Yeah. Do people actually say that? Robinhood solution and have since moved to mux.com.