← All Articles A Product of Kinsa Creative

Embed Video in HTML

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

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.

mp4

Screen recordings made in QuickTime will be .mov files. To convert .mov to .mp4 with the Adobe Express online tool.

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.

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.