HTML 5 Video

Quick Start

The Video Embed element on MDN explains how to use <video> HTML element in great detail.

The following code snippet will embed a vieo which will autoplay and loop on both desktop and mobile browsers.

HTML

<video
    playsinline
    autoplay
    muted
    loop
>
    <source src="/path-to-video" type="video/mp4" />
    <div>
        <h3>Your browser doesn't support HTML5 video.</h3>
        <p>Here is a <a href={/path-to-video}>link to the video</a> instead.</p>
    </div>
</video>

React

<video
    playsInline     autoPlay     muted
    loop
>
    <source src={videoPath} type="video/mp4" />
    <div>
        <h3>Your browser doesn't support HTML5 video.</h3>
        <p>
            Here is a <a href={videoPath}>link to the video</a> instead.
        </p>
    </div>
</video>

Note that playsInline and autoPlay are camel case, although the corresponding HTML attributes do not have dash between them.

Autoplay on Mobile Browsers

In order to autoplay videos on mobile browsers, All of the following attributes need to be specified:

autoPlay
muted
playsinline

Video Processing Using `ffmpeg`

When preparing video resources for my site, I realized ffmpeg is super handy.

Convert Video Format

The following code snippet converts the video from .mov format to .mp4 format.

ffmpeg -i input.mov -vcodec copy -acodec copy output.mp4

Compress MP4 Video on Mac

The following code snippet compresses the video, to increase performance

ffmpeg -i input.mp4 -vcodec libx264 -crf 28 compressed.mp4