If you want to put video on the web, you’ll probably just going to upload it to YouTube and use their embed code. However, if you want to embed video on your own site without YouTube you want to make use of HTML5’s video element. To do that, you’ll want to make two encodings of your videos: WebM (Google backed) and H.264 (current standard). H.264 is easy because it’s been a standard for a long time (I personally use HandBrake), but WebM is quite a bit more difficult. There hasn’t be a defacto winner when it comes to encoding, though Miro Converter has come close.

However, the core of Miro and many others is the open encoder FFmpeg so we’re just going to setup an easy way to use that in this tutorial. Here are our goals:

1. Install FFmpeg on Windows
2. Create a Batch file (.bat) that we can drag-and-drop video files on to create WebM video
3. Write the HTML5 code to allow for maximum speed and compatibility

Install FFmpeg on Windows

Grab the STATIC Windows download (most likely 64-bit). You’ll need 7-zip to unpack the file. Extract the included folder into C:\Program Files\ and then navigate to that location and rename the folder to simply “ffmpeg“.

Create a Windows Batch File

Open up a plain text editor (Notepad is fine) and copy in the following text:

REM webm (VP9 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -c:v libvpx-vp9 -crf 20 -b:v 0 -c:a libvorbis "%~n1.webm"
REM jpeg (screenshots taken at different intervals scaled if necessary to 720px height)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 1 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:720 -f image2 "%~n1-01.jpg"
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 5 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:720 -f image2 "%~n1-05.jpg"
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 10 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:720 -f image2 "%~n1-10.jpg"
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 30 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:720 -f image2 "%~n1-30.jpg"
"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 60 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:720 -f image2 "%~n1-60.jpg"

Save this file as a .bat file (for instance WEBMconverter.bat) to somewhere easy to access, like your desktop. You can then drag-and-drop a video file onto this batch file to start processing. Note: This idea was inspired by a separate post by John Dyer.

The lines that start with REM are simply REMarks or comments. The second line is the one that is doing the video work. It converts the file, using the original filename, to a Constant bitrate of 20 WebM file using VP9/Vorbis encoding. The file is then saved in the same location and using the same file name, except with the .webm extension.

The remaining lines are an extra feature that you can choose not to use if you wish (just remove the lines from the file). These lines are going to get screen captures (images) at 1, 5, 10, 30, and 60 seconds of your video (if applicable) and save them as JPEG files with -## appended (representing the number of seconds into the video). This is a great way to get a still image from the video to use in step 3.

Write the HTML5 Code

Here’s my sample code:

<video controls style="width:352px;height:224px;" poster="kickum.jpg">
	<source src="kickum.webm" type='video/webm;codecs="vp9, vorbis"'/>
	<source src="kickum.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

To break things down:

• controls: Show playback controls.
• style=”width:352px;height:224px;” (optional): Set the size of the video container for your page.
• poster=”kickum.jpg” (optional): This replaces the default image for your video (prior to PLAY) with an image of your choice (e.g. one of the screencaps generated by the batch file in step 2).
• source: Specify a video available. The browser will go through list until it finds one it can play. WebM first is a good choice due to its smaller size (25% smaller in my example).

I know the type section of the source tag may be confusing, but just understand that these are basic copy/paste if you are using the batch file in step 2 and you are using a standard h.264 encoded video with ACC audio (like what Handbrake does). Having both the .webm and the .mp4 files allows the video to work on all browsers, including mobile browsers.

Here’s what the video looks like:

Here is what it looks like with style and poster removed:

<video controls>
	<source src="kickum.webm" type='video/webm;codecs="vp9, vorbis"'/>
	<source src="kickum.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

Bonus: Trimming a File

If you have a video that just needs to be trimmed down from 00:00:00 (H:M:S) to 00:55:00, use this command manually:

ffmpeg -ss 00:00:00 -i filename.flv -t 00:55:00 -c copy newfile.flv