Playing with html5 video

screenshot of html5 video on decoded.legal

I've wanted to use video more on the decoded.legal website for a while, but I've just not got round to it.

Until this weekend.

It's really quite simple

Very, very simple:

  • take some video
  • convert it to the supported formats
  • upload it
  • add a track for closed captions
  • stick some html into the page code to string it all together

Take some video

My plan is for short — between 15 and 60 second — clips, dotted around the site.

Enough to get a snapshot of me, but not a complete replacement for what's on the site.

And, by "honest", I mean "not professionally produced". No fancy camera, no pro lighting, no high quality microphone — just the same setup I use for video conferencing. Initial tests suggests that this should be good enough for giving an honest impression of what it would be like to work with me.

Convert it to the supported formats

Wouldn't it be nice if all browsers supported the same video files?

Yeah.

No.

PhotoBooth records in .mov, and, to cover most browsers, I need both .mp4 and .webm/.ogg.

ffmpeg was being a pain on my Ubuntu machine, and a quick search on the error messages which it yielded did not suggest a quick or simple answer.

So, since this is just an experiment, I found a simple freeware transcoder for macOS, and I'll do the converting before I upload the video files. It's not quite what I want, but it's not problematic enough for me to spend any more time on it right now.

Upload it

I don't have any analytics running on the website, so I've no idea how popular it is. But what I do have is access to graphing of the traffic volume too and from the site, and it's not significant. In part, that's because I try to keep the page sizes very low but, more realistically, it's because we don't get many visitors. And that's fine — we're not aiming to be the Internet's homepage.

So hosting it on our own servers should be fine.

I pondered hosting the video files on our Peertube instance, but decided against it, for the simple reasons that:

  • it would require a change to the content security policy for the site, which currently doesn't permit any external resources (okay, not a big deal)
  • I quite like having the site available in .onion space, and so I want to minimise calls out to non-.onion resources. And since I don't have a .onion version of PeerTube, keeping the files within decoded.legal itself makes sense.

So, for now at least, they're just on the web server.

Add a track for closed captions

I want our site to be accessible. Not just in the "reasonable adjustments" bare minimum sense, but in a genuine effort to avoid excluding people. So captions were a requirement.

Fortunately, this is very simple (especially for such short clips), thanks to the html5 track function, which one uses through .vtt files.

These are simple .vtt files, specifying what text to show for what time period.

I haven't attempted to style them — I'm not sure it's necessary — but the option's there.

Stick some html into the page code to string it all together

<video width="100%" poster="videos/welcome.jpg" controls preload="none">

<source src="videos/welcome_to_decodedlegal.m4v" type="video/mp4">

<source src="videos/welcome_to_decodedlegal.webm" type="video/webm">

<track label="Captions" kind="subtitles" srclang="en" src="videos/welcome_to_decodedlegal.vtt" default>

</video>

To pre-load or not to pre-load

I rather like the fact that our website page sizes are tiny in comparison to most law firm sites.

So I've got two options, assuming that pre-loading the whole video isn't sensible:

  • pre-load nothing
  • pre-load only the metadata

Pre-loading only the metadata adds about 500KB. Not massive, in the grand scheme of things, but still double the size of the page, just for video metadata. That gives you the clip's length in the video viewer and, as far as I can tell, not much else from a practical point of view.

Pre-loading nothing means that the video player shows that it's for a video, but doesn’t show the length of the video until you activate it. And that doesn't look great.

So I'm still pondering on this one.

Next steps

I'll probably add a few more clips over the next few days, and see what I think of the approach.

Or, better yet, try to get an impression of what others think of them.

At worst, I've wasted a few hours learning something new. At best, I've got something new and perhaps even useful for our site.

Book review: Rehumanize Your Business

Book cover of "Rehumazing your business"

tl;dr: I want a refund.

A friend recommended that I read "Rehumanize Your Business” — a book about using short video clips instead of relying so heavily on email.

Or, I should say, "friend".

I assume that they actually hate me.

I bought this book, for £13.51. (I'm not including a link, lest you should inadvertently click on it and buy the book.)

I could have bought 65 donuts for that price. Or three Raspberry Pi Picos.

But, no. I bought the book.

It is 224 pages and I read it in 10 minutes. If you skip the bits I considered to be fluff, and the bits which are marketing the author's own service, and the bits about maximising surveillance potential with click tracking (urgh), there are a few pages of what, in my opinion, amount to Actually Useful Content.

Honestly, this should have been a blogpost, not a book.

The gist of the book is:

  • use video clips of less than 60 seconds, especially with people you have not met yet, to build rapport
  • make each video personal to the recipient by using their name or common interest
  • use a catchy, short message in the email in which you link to the video, encouraging them to view it, and then reply to you
  • smile

That's basically it. So perhaps a tweet, rather than a blogpost.

Will I give it a try? Yes, probably. I'm not sure if it's for me, but I'm happy to try something new, and gauge the reaction.

Did I need to spend £13.51 on the book? Hell no.

goes to check Amazon's returns policy