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.