Embed Video in HTML

HTML5 natively accepts 3 video formats: mp4, Ogg, and Webm.

Screen recordings made in QuickTime will be .mov files. Some sort of tool will need to be used to create the other file formats.

Using Cloud-Based Tools

CloudConvert can be used to create .mp4 and .webm files.

The Adobe Express online tool can be used to convert .mov to .mp4 files.

Local

Pre-requirement: ffmpeg

To create a Webm file, you will need the ffmpeg library. The easiest way to install this is via Homebrew, which will first need to be installed itself. Once Homebrew is installed, to install the ffmpeg formulae: brew install ffmpeg.

The ffmpeg command line tool, installed with the Homebrew package, will convert between a large number of formats. I haven't fully experimented with it but it might be possible to do all these conversions with ffmpeg simply by specifying the correct file extension for the output file.

Ogg

Use the VLC player application to create a .ogg file. From the File menu in the VLC Media Player application,, choose Covert / Stream. Choose either the .mov file or .mp4 file as the source and Video - Theora + Vorbis (OGG) as the profile. Save as File.

Webm

Once ffmpeg is installed, VLC Player can be used to create the .webm file as well. From the File menu, choose Covert / Stream. Choose the .ogg file as the source and Video - VP80 + Vorbis (Webm) as the profile. Save as File.

Or, the ffmpeg command line tool can be used directly:

$ ffmpeg -i file-name.mp4 file-name.webm

This is a much slower process than using VLC.

The Poster File

The best way to make the poster file is to import the .mov file into a new Adobe Premier project and export the first frame.

HTML

Embed with default controls, preloading, and a custom poster:

MDN documents the full list of attributes applicable to the video HTML element.

Feedback?

Email us at enquiries@kinsa.cc.