Dave Kiss, Senior Community Engineering Lead at Mux: Wes, the people must know. Who are you and what do you do?
Wes Bos, Fullstack JS Course Creator and Co-host of Syntax.fm: Hey, uh, my name is Wes Boss. I'm a full-stack developer, and I do, I do two things. I, I create training courses on web development and, and I have a podcast called Syntax and we have a YouTube channel, and that's more content around learning web development and keeping up with what's going on with the web development scene.
Dave: What are some of the, uh, video courses that you work on?
Wes: Man, I have a whole bunch of courses, um, ranging from backend, Node.js, React.js. Um, probably my most popular ones revolve around just learning straight up JavaScript. I have a free one called JavaScript30, which I think over half a million people have taken it. And then I have a, a paid one, which is called Beginner JavaScript, and those are just sort of two pillars in learning how to code, learning how to build stuff in JavaScript.
Dave: Uh, you've recently migrated your content over to Mux, but before that you were using Vimeo for a while. At what point did you start to hit friction or any bottlenecks with that solution?
Wes: Yeah, so when I first looked for a video solution, this is probably 10 years ago, um, I needed something that you could, I could embed into my custom course platform, right? And like, like YouTube's not a good option because that's, it's kind of public and you can make 'em private, but that's not really, uh, not really the move. I wanted to be able to lock it down to, um, only provide access to those who have paid for it.
So I threw 'em up all on Vimeo. I had the $200 free. And then of course they came knocking like a year later and said, "Hey, like you're, you're not allowed to use the $200 plan for private courses, right? So you have to pay us now." And, and my bill went from, I think it went from 200 bucks a year to $10,000 a year. Um, which was a pretty big shocker. At the time I was just like, you know what? Pay the man. And like, this is not something I'm really focusing on, um, right now. As much as I love infrastructure and, and working on the course platform, um, I also need to spend time working on the content. Right?
Um, so I just felt like I was getting squeezed. Where my bill kept going up, I wasn't really getting anything. You can, you can see that infrastructure in general is getting cheaper for, for a lot of people out there, and I was just like, man, I gotta get, I gotta get off of this Vimeo because it's, it's costing way too much. And also like the embed platform was, was kind of hard to control. There wasn't a whole lot of like, um, back and forth.
I remember I had one issue where you couldn't catch embed errors. There was like one Chrome extension that was blocking the embed and, and that would throw an error, and there was no possible way to catch that error. To know that the embed had had failed and I was just back and forth on their, on their GitHub, and it took like nine months to just get a catch method added to their SDK, um, which was really frustrating because people would, it caused me a lot of support. People would, "Hey, your website's not working," and it's like, now you have this weird Chrome extension, it's fine, but I, I should at least be able to programmatically alert you and let you know.
So just little things like that that kind of, kind of pushed me the wrong way. Being able to restrict them to a specific domain name was another, um, pain of mine. Because you had to like create these like obtuse rules where you could say, this video can only be embedded on this domain name, but like then when you're running in local development, you have to add all of those domain names and then like, I dunno, I have I've I've got like, like 15 courses and they're all on different domain names. So if I want, I wanna like, do that for production, and for development. It was just a huge pain in the butt to, to have, to maintain all of that stuff.
I did build, uh, my own ingest platform, um, as just a proof-of-concept and, and hosted it on Cloudflare, uh, just to see, 'cause Cloudflare has this thing where it's free bandwidth and um, but you can't like, you, you still have to like chop them all up into all the different segments and all of the different resolutions and figure out your own bit rates and run FFmpeg and all that type of stuff. And that was fun to build. But it's that, that's, that type of stuff sucks to maintain, um, and I'm not, I'm not in that business. Like I just wanna pay the man and, and move and have it work. I had known about Mux for a long time, just Scott Tolinsky, he ran Level Up tutorials on it, he, he was a big fan. In the like developer community, you want something that is much more like targeted at developers.
The move was simply just, querying my course platform for all of the courses and all of the videos and then sending off a request to, actually, I didn't even need to download it, which was, was really neat because Vimeo or Mux can slurp up from just a publicly accessible URL. So that's one thing I was very surprised at. I was like, I'm gonna have to download, like, like terabytes of video and then, and have to re-upload them, you know, and I've got fast internet, but that's gonna be a bit of a pain. But it was really nice 'cause I simply just needed to query the video from Vimeo, get the, the publicly accessible URL, um, and then give that to Mux, and then Mux would then slurp it up and then return me a, I dunno, some sort of ID. And then I would save that ID, uh, to my course platform so I could reference what the new ID was, uh, alongside the old Vimeo IDs.
Dave: Were there any other features about Mux that you didn't know about but were, uh, pleasantly surprised with after the migration?
Wes Bos: The, the access control was something that I much preferred and, and was surprised that I liked it because in, in order to give people access to a video on Vimeo, you simply just had to, uh, restrict it to a certain domain name. Um, and, and with Mux, every single person, every single load, I can simply just generate a, a JWT, and and say like if they have access to this video, not simply that they are on this domain name and have figured out how to embed it, because there certainly could be ways around that then, then give them access to the video.
And then I was like, yeah, that's nice. But then I also wanna be able to preview them like on the Mux dashboard. And you told me, yeah, you just create multiple. What is it? Playback IDs? What's the, what's the word for it?
Dave: Playback policies.
Wes: Yeah, playback policies. Which, that was really nice.
Quite honestly, one, one of the biggest pulls for me was simply just Media Chrome. Um, so the player, uh, to actually play Mux videos, is, is obviously Media Chrome, you guys have it. And I've used Media Chrome many times not with Mux, um, which is like, shout out to you guys for doing that because you've made this amazing piece of technology that you can use with anything. And then when it did come time to actually using it with Mux it was, was really easy. Um, and I was able to move over all of my, like, um, on progress, on pause, on play, on speed change. Like, you know, like I, I coded the thing to web standards as close as possible with Vimeo, and then all of those methods moved over so nicely. To, to the media Chrome.
And then Media Chrome is awesome because I have way more control over what the player looks like and how it acts versus just the, the Vimeo one where you can like, change the color of the bar and, and hide some of the icons. This is my player, and actually there's one thing I haven't done yet, is you see this bar right here, the like skip ahead 10 seconds, 25 seconds, wide screen? Um, this bar was, was added because of limitations in Vimeo's embed, uh, meaning that, like, I, like I literally couldn't add custom skip buttons in the Vimeo player. The, the move was simply just add a bar underneath it and, and now I can, I can do whatever I want and it should be integrated into it. But the, the move for Mux was simply like, just get the, just get it moved over first, um, and then once I have control over it I can start rethinking what the, the actual player looks like. But like, everything just worked outta the box.
One thing I don't think I had previously was this little thumbnail preview when you hover over top of it, which, I really like when I'm trying to look for a specific part. Um, especially when you're going through one of the tutorials. If you're, if you're looking at one of the things that we're building and you want to pause it when it gets to a specific point, it's nice to be able to see where you're at.
Dave: How does your video course, platform handle and manage your video uploads to Mux?
Wes: Uh, I have the API integration, so a lot of my course platform is just like JSON files because I find it easier to manage rather than having to create some sort of UI and then all of the data of like, where have, which videos have you watched and, and all of that stuff, that stuff's stored in the database and attached to specific users. Um, and then I just, I just hit a button or I run a script and it will just upload 'em all and then if they've changed it will upload those, the, the changed ones and overwrite them. So yeah, I'm just, just using a script, which is nice 'cause it keeps everything in sync much better than having to do any click ops.
Dave: What would you say to someone who is maybe in the same situation that you were on the fence, considering their options, maybe not really sure what to do. Do you have any advice for that person?
Wes: I, I think, like, I'm kind of bummed that I, I took so long to do it. Um, and my hesitation was that like, I thought it would be much more work than it actually was. Like I was able to run my Vimeo player and my Mux player in parallel for several weeks while I like tested things and it, it worked really well, so it's, it was a surprisingly smooth move over and I didn't have to really write a whole lot of code, uh, to, to, to do it.
Dave: Wes, thanks so much for taking time to chat. Where can people find you on the internet?
Wes: I am available at wesbos.com, that's my personal website. I'm at Wes Bos on, I spend most of my time on, on Twitter, but I'm on all the social networks, TikTok and Blue Sky and Instagram as well. If you go to wesbos.com/courses, you'll get a list of all of the courses that I offer, and then of course, check us, check us out at syntax.fm as well. If you wanna learn, we're on YouTube, we're on all the podcasting platforms, and uh, you can learn a thing or two about web development.
