Tag: website

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.