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.