Playing with html5 video

screenshot of html5 video on

I've wanted to use video more on the 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?



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


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.

Useful books for advancing your business

My bookcase

Having written yesterday about a book I would not recommend, I thought I'd balance it by writing about books and training that I have found valuable in running

(I buy a mix of ebooks and hard copy books, but a screenshot of Calibre isn't as good!)

Links are to Amazon UK (other bookstores are available), and they are not affiliate links.

Here are some of my favourites:


Getting Things Done: The Art of Stress-free Productivity: probably one of those "Marmite" books, but the GTD principles really work for me, and help me manage my time and increase my productivity / efficiency. My key efficiency tip is that you don't need to read most of this book — the flowchart will tell you pretty much all you need to know to get started.

Presenting / speaking

The Presentation Secrets of Steve Jobs: How to Be Insanely Great in Front of Any Audience: hyperbolic title, but I learned a lot from this, and it's certainly influenced how I present.

Zen and the Art of Stand-Up Comedy: I'd like to think that my presentations are entertaining as well as informative, and the principles from this helped me develop that.

Confessions of a Public Speaker Paperback: useful in terms of planning, dealing with things going wrong, and generally about being a compelling speaker.

Negotiating (including price!) / deescalating / conflict resolution

Getting to Yes: Negotiating Agreement Without Giving: I still find some of the principles for negotiating in here useful, although I have tempered them with some of the suggestions from "Never Split The Difference".

Never Split the Difference: Negotiating as if Your Life Depended on It: a different approach to "Getting To Yes", with clear, practical guidance (and only a couple of hours to read it, if you skip over some of the numerous, lengthy, case studies) .

Crucial Conversations Tools for Talking When Stakes Are High: another book about talking, and getting people to open up, to assist in avoiding and resolving conflict.

Advocacy / influencing

The Devil's Advocate: useful for improving both written and oral advocacy and influencing, which accounts for a large amount of what I do for clients (even though we don't do litigation).


A Manual of Style for Contract Drafting: I'm halfway through Ken's live virtual "Masterclass" course, and I'm so delighted I've finally found the time to do it. The accompanying book is great, but forcing myself to look at how to improve the way I write agreements is even better.

Typography for Lawyers: Essential Tools for Polished & Persuasive Documents: yes, really. Typography for Lawyers. Lots of useful tips to make your documents look better, which makes them easier to understand/


True Worth: How To Charge What You're Worth And Get It: this is a short book, but it is worth a quick flick. I still struggle with pricing, and this helped me think about describing the true value to a prospective client of what they'd get from engaging me.

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