Hosting Notes

For Video on the Web

Overview

Anyone who is seriously hosting a video should not do so on their own servers. Video is just one of those heavy resources that demands a CDN to scale properly. However, some video content is not intended to scale. I, for example, often make little joke videos that I host in order to allow a handful of people to watch them. These videos are not intended for public audience and will only be ever be viewed a few dozen times. Self-hosting is just fine for this, and in fact might be preferrable as ownership, hosting, and access control is guaranteed forever (or rather, for as long as I maintain the servers).

These notes are for hosting of video on a personal or otherwise small website.

Browser Nuts and Bolts

I've found that the basic HTML5 video player is perfectly acceptable for most cases. I've embedded one just below with a short video of a CNC run.

The list of <source> tags within the <video> tag determine the load order. Allegedly the browser will try them sequentially until it finds one with an encoding it understands.

Formats

There are approximately one shit-million possible combinations of codec, container, and format to choose from when creating a video. WebM is my current favorite as it is:

royalty free,
open source, and
highly compressed.

However, it's somewhat newer than MP4 and for universal compatibility it's best to have an MP4 listed as a backup.

Indulging once again in the ultimate empirical experience that is searching for ffmpeg flags. This site has some recommendations for flags, which I have reproduced and altered a bit below for convenience:

MP4

ffmpeg -i original.xxx -vcodec libx264 -f mp4 -preset slow web_ready.mp4

WEBM

ffmpeg -i original.xxx -vcodec libvpx-vp9 -acodec libvorbis -f webm -vb 1M -crf 10 web_ready.webm

-ab and -vb can be used to set audio and video bitrate. The values for these require some tinkering. Higher bitrate (or lower CRF) means more quality. My rough notes are below:

The time it takes to encode the video is proportional to bitrate.
It's probably better to use CRF than raw bitrate.
A bitrate of 2500k is obscene.
A bitrate of 1024k seems a good compromise.
Using CRF of 10 yields a seemingly identical quality video at an identical size.

Embed Thumbnails

I tend to post these in Discord, and by looking at their own main page I've discovered they use <meta> tags to determine the embed title, description, and thumbnail image. Each <meta> tag takes the form <meta property="$prop" content="$cont">, where the properties used are og:title, og:description, and og:image.