Fair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts.
I have an iOS simulator up in this video, and I’m putting an HTML video tag in a basic HTML document for a quick video I recorded with Kap.
There are lots of things to consider with video:
- Giving it controls! As in,
<video src="" controls></video>. Note in the video it took me a minute to realize that’s why the video didn’t show up whatsoever on mobile until it did. - Playing the video inline, like
<video src="" controls playsinline></video>, which keeps it from going fullscreen on mobile the second you play it. - Sizing it fluidly and with aspect ratio.
- Where to host it. Is your web server fine? Should it be on a CDN? Should you use a media host that specializes in stuff like this? In the video, I plop it on Droplr which is convenient, then on CodePen Asset Hosting which is handy too, and ultimately on Cloudinary because it can do fancy stuff like optimization and format handling.
- Making sure the video looks like a damn video. On mobile, if you’re using
<video>, that means a poster:<video src="" poster="" controls></video>. Otherwise, you get a blank white nothing. Sometimes, that alone is worth using some kind of helper.
Of course, you can just chuck video on YouTube or whatever and get good video handling for nothing. But YouTube isn’t always right for tiny little demonstration videos like I was dealing with here. Plus, they are heavy, so you might be looking at lazy loading them.
Ultimately, we look at studio.cloudinary.com. It can do some neat stuff, like offer a customized player and do adaptive bitrate streaming, which is fancy fancy and really seems like an important thing for the best possible video performance.
