Using YouTube videos in HTML5 presentations

I recently gave a presentation at Bacon 2013. My presentation involved demoing some features of the Web Audio API, so I built it using deck.js so that I could present using Google Chrome.

I wanted to include some YouTube videos inside <video> elements in my deck. Here’s my process for creating those videos on OS X Mountain Lion using command line tools.

Downloading YouTube videos

To download the videos there’s a simple command-line tool called youtube-dl (install with brew install youtube-dl if you’re using homebrew). To download a youtube video you just pass in the url

$ youtube-dl http://www.youtube.com/watch?v=dQw4w9WgXcQ

Converting FLV to h264 with AAC audio

The best combination of video and audio codecs I found for displaying my slide deck in Google Chrome was h264 with AAC audio. FFmpeg (install with brew install ffmpeg) handles the conversion from FLV

$ ffmpeg -i input_file.flv -c:a aac -strict -2 -b:a 128k -c:v libx264 -profile:v baseline output_file.mp4

Extracting a segment of the video

If you only want a small part of a video file you can use FFmpeg to extract a segment

$ ffmpeg -i input_file.mp4 -acodec copy -vcodec copy -ss 00:04:00 -t 00:00:20  output_file.mp4

Where the first time stamp is the start of the segment and the -t option is the duration (in HH:MM:SS format).

The output file is now suitable for use in a <video> tag.