Brett Terpstravideo - Brett Terpstra

Seriously easy HTML5 video encoding

Brett — Sun, 23 Oct 2011 18:38:39 +0000

I recently discovered an app which takes input video in various formats and encodes all of the necessary formats for cross-browser, cross-platform HTML5 video embedding. It even outputs the tags for you. It’s called, appropriately, Easy HTML5 Video.

While I will probably continue to use my homebrew script for this, I wanted to mention it for anyone not really digging the command line approach. The lack of an app that could do an all-in-one batch encode for HTML5 video was what inspired my script in the first place. Easy HTML5 Video keeps things very, very simple. No quality adjustments or ffmpeg flags, just an output size setting and the option to publish the final videos to an FTP server.

Easy HTML5 Video is a cross-platform Java app. It’s not terribly pretty, but it works and the quality of output looks great on my tests. The free version puts a small logo on the output. It’s relatively unobtrusive, but if you want to remove it or replace it with your own logo, you’ll need to license the app: $49 for a single-website license, $69 for an unlimited license.

If you’re working with video these days, you need to be working with HTML5 formats. This makes it drop-dead easy. More info on the website.

Addendum: As Joe Workman pointed out on Twitter, I should probably mention Miro as a very flexible and free HTML5 video converter. However, the problem that Easy HTML5 Video solves for me is not flexibility or just the ability to handle the necessary formats, it’s the ability to drop one file in and automatically get out everything I need without manually setting up each format. Automation.

Originally posted on BrettTerpstra.com at Seriously easy HTML5 video encoding

Fog In The Valley

Brett — Sat, 10 Sep 2011 18:28:45 +0000

As some of you may know, my wife Aditi and I moved into a new house last week. It’s been a crazy week of settling in, but it’s already starting to feel like home. As it turns out, I’m less opposed to weekend projects than I had thought I would be. I’m not exactly handy, but I’m learning as I go.

Our house is on one of the highest ridges in our town in the unglaciated¹ region of the Mississippi River Valley. My office includes an eight-foot-wide sliding glass door that faces out onto the valley below, and the view is incredible. I watch the fog roll into the valley every morning, roil and roll over itself and then dissipate as the sun rises. It very well might be one of those things I never get bored with seeing, much like the rest of this gorgeous area.

I made a time-lapse video of the view from my porch using a Nikon D60 connected to my MacBook Air and DSLRemote on my iPhone. A few hundred snaps later, here’s the video…

It wasn’t flattened by glaciers. It’s a hard word to find a definition of, but I swear it’s a real word. ↩

Originally posted on BrettTerpstra.com at Fog In The Valley

Automated HTML5 video encoding revisited

Brett — Sun, 01 May 2011 15:21:51 +0000

A little while ago I approached the subject of scripting automated encoding for HTML5 video formats. I started using the process regularly as I built the Blogsmith Bundle video site. Pretty soon I got some help from friend and TUAW editor Mike Rose, and working together we refined the script and improved the speed tremendously. It was built for use on Mac OS X, but with just a few lines modified, it should work on any *NIX system.

What it does

The script is specifically designed to take an MPEG-4, H.264 file, move it to a new folder based on the filename, create WEBM and OGV versions of it in the new folder, and upload the whole folder to a server using rsync. SSH information and target directories are specified in the config at the top of the script. At the end, it takes what it knows about the files and filenames and creates a TextMate Markdown blog template, inserts the video shortcode for the VideoJS WordPress plugin (which is common syntax for other plugins as well) and opens it for editing in TextMate. The rsync command really needs keyless SSH login for this to be considered fully-automated.

If you run this script with Hazel, you can just render an H.264 video (.mov files that pass the H.264 test¹ will automatically be renamed to .mp4) to that folder from your screen-recording application of choice, sit back for a few minutes (or start writing the post) and wait for the pre-populated TextMate blog post to pop open. Then type or paste your text in, hit Control-Command-P (assuming you’re set up for TextMate->WordPress blogging) and your video is posted.

Improvements

The first thing that happened in this rewrite was a major simplification of the WEBM encoding process, which now only takes a third of the time it did before and the files are not significantly larger in most cases. They may even look better. The old command involved two passes, one of them turning out to be unnecessary; ffmpeg is smarter than I thought. The new command (using the variables from the script) is just /usr/local/bin/ffmpeg -i "$FILENAME" -b 614400 -s $MAXSIZE -aspect 16:9 "$BASENAME".webm.

I also added better logging, optional progress reports with Growl, batch file handling and a few other refinements. The logging, if enabled in the config at the top, will output information including processing time for each file and total processing time to STDOUT (command line) and to the system log where you can watch it from Console. If you enable growl notifications, the messages at the beginning and end of each conversion will be “growled” on your screen.

Using the script

You’ll need a couple of additional utilities to do the conversions.

Requirements

To run the script and do the encoding, you’ll need ffmpeg and ffmpeg2theora. You can install ffmpeg from Homebrew (brew install ffmpeg) quite easily, if you’re set up for that. You can also pull the binary out of ffmpegX with a few simple steps. You can, of course, build your own if you have the developer tools installed.

ffmpeg2theora (needed for OGV conversion) no longer appears to be available from brew, but there are OS X binaries (and source) available for download.

The script is below. You’ll want to modify the information in the configuration section at the top, and modify the template output at the bottom to suit your needs. Anything between <<-POSTTEMPLATE and POSTTEMPLATE is freeform text that you can edit in any way you like, including the use of $variables. If you’d rather do something such as copy a shortcode to your clipboard and show a Growl message, just use pbcopy and growlnotify. You could also just comment out the template part and let Hazel tell you when it’s done, if you want to handle things more manually. I’ll let you work out the details on that.

Command line usage

To use the script from the command line, save it as “html5encode.sh” somewhere in your path, change to its parent folder in Terminal and run chmod a+x html5encode.sh. The you can run it on any h.264 .mov or .mp4 file and it will handle the rest. It also handles batches, so you can specify multiple targets or use *.mp4 to run it on all .mp4 files in a folder. It will process them one by one, creating new folders for each.

Hazel

If you want to run it with Hazel, you can follow the same procedure and set up a rule that runs a shell script when a .mov or .mp4 is detected in a watch folder. The script can then be run as a command or be pasted in its entirety into the Hazel script editor within the rule.

You should be able to pull off using this with OS X Folder Actions, as well, but I haven’t played with that yet.

Bonus tip: If you name your original .mov or .mp4 file with a CamelCased name, it will break apart the filename and create the title of your post based on it. Not an essential feature, but kind of nifty. Well, I think so anyway.

The script

View Raw | Download

#!/bin/bash
#################################################################
### html5encode.sh by Brett Terpstra and Mike Rose
### Published 05/01/2011
### Freely distributed, modifications welcomed (with attribution)
#################################################################
### Configuration ###############################################
#################################################################
MAXSIZE="960x540"
DISPLAYWIDTH="600"
DISPLAYHEIGHT="338"
SSHURL="username@ssh.host.name"
SSHDIR="/server/folder/target/for/rsync/"
WEBDIR="/front-end/url/path/video/" # used for blog template
LOGGING=true # send status messages and times to STDOUT and syslog
GROWLLOG=false # duplicate messages to growl, if installed
##################################################################
### END Configuration ############################################
##################################################################
 
# function to handle logging (if enabled) to STDOUT and STDERR 
# as well as Growl (if enabled)
function logit() {
  if $LOGGING ; then
    logger -st "HTML5 Encoder" "$1"
    if $GROWLLOG ; then
      /usr/local/bin/growlnotify -t "HTML5 Encoder" -a "Terminal" -m "$1"
    fi
  fi
}
 
# Count the inputs for log message
if [[ $# -gt 1 ]]; then
  logit "Starting batch conversion."
  maintimer1=`date '+%s'`
else
  logit "Starting HTML5 Encoder"
fi
 
# Loop through each passed file
for file in "$@"; do
  timer1=`date '+%s'`
  INPUT=$file
  # Check that input file is H.264
  isH264=`mdls -raw -name kMDItemCodecs $INPUT|grep H.264`
 
  if [ !$isH264 ] ; then
    logit "$INPUT is not h.264"
    continue
  fi
 
  DIRNAME=`dirname "$INPUT"`
  FILENAME=`basename "$INPUT"`
  BASENAME=${FILENAME%%.*}
  logit "Conversion of $FILENAME started on `date '+%D'` at `date '+%r'`"
  bytesize=`stat -f '%z' $FILENAME`
  filesize=`echo "scale = 2 ; $bytesize/1048576"|bc -lq`
  cd "$DIRNAME"
  if [ -d "$BASENAME" ]; then
    logit "Found $FILENAME, but directory $BASENAME already exists. Aborting"
    continue
  fi
  mkdir "$BASENAME"
  mv "$FILENAME" "$BASENAME/"
  cd "$BASENAME"
  if [[ ${FILENAME#*.} -eq "mov" ]]; then mv $FILENAME ${BASENAME}.mp4; fi  
  FILENAME=${BASENAME}.mp4
  /usr/local/bin/ffmpeg -i "$FILENAME" -b 614400 -s $MAXSIZE -aspect 16:9 "$BASENAME".webm
  logit "Completed webm conversion"
  /usr/local/bin/ffmpeg2theora --videoquality 5 --audioquality 1 --max_size $MAXSIZE "$FILENAME" -o "$BASENAME.ogv"
  logit "Completed ogv conversion"
  /usr/local/bin/ffmpeg -i "$FILENAME" -ss 0 -vframes 1 -vcodec mjpeg -f image2 "${BASENAME}Poster.jpg"
  logit "Created poster image"
 
  # Create a title from camelcased filename
  TITLE=`echo "$BASENAME"|sed 's/\([A-Z][^A-Z]*\)/& /g'|sed 's/ $//'`
  SERVER=`echo "$SSHURL"|sed 's/^.*\@//'`
  logit "Uploading to $SERVER..."
  cd ..
  rsync -v -r -e ssh "`pwd`/$BASENAME" $SSHURL:$SSHDIR
  logit "Finished Uploading"
  # remove trailing slash from $WEBDIR
  WEBDIR=`echo "$WEBDIR"|sed 's/\/$//'`
  cat > "$BASENAME/$BASENAME.blog.markdown" <<-POSTTEMPLATE
Type: Blog Post (Markdown)
Blog: BlogsmithVideo
Title: $TITLE
Keywords: 
Status: draft
Pings: On
Comments: On
Category: Tutorial
 
Synopsis
 
[video mp4="$WEBDIR/$BASENAME/$BASENAME.mp4" ogg="$WEBDIR/$BASENAME/$BASENAME.ogv" webm="$WEBDIR/$BASENAME/$BASENAME.webm" poster="$WEBDIR/$BASENAME/${BASENAME}Poster.jpg" preload="true" width="$DISPLAYWIDTH" height="$DISPLAYHEIGHT"]
 

Transcript
 
POSTTEMPLATE
 
  open "$BASENAME/$BASENAME.blog.markdown" -a "TextMate.app"
  timer2=`date '+%s'`
  time=`echo "scale=2 ; ($timer2-$timer1)/60"|bc -lq`
  logit "Conversion of $FILENAME complete"
  logit "It took $time minutes to process a ${filesize}M MP4 to webm and ogv and upload to `echo "$SSHURL"|sed 's/^.*\@//'`."
done
if [[ $# -gt 1 ]]; then
  maintimer2=`date '+%s'`
  total=`echo "scale=2 ; ($maintimer2-$maintimer1)/60"|bc -lq`
  logit "Batch conversion complete, total time $total minutes."
fi

Hopefully this will make a few people’s lives easier. Mike and I have battle tested it and it seems to be a pretty great fit for our needs. If you modify it for your own needs, please share (with credit) so that it can become as well-rounded as possible!

The script runs a quick check using mdls to look for the h.264 codec. It will skip the file if it doesn’t match the criteria. It doesn’t check for AAC, but assumes that you know what you’re doing to some extent. If you’re running Hazel, just check for the specific extension you’re rendering to (.mov or .mp4) to avoid any hassle from the start. ↩

Originally posted on BrettTerpstra.com at Automated HTML5 video encoding revisited

A couple of TextMate Macros for Markdown lists

Brett — Sun, 24 Apr 2011 17:59:51 +0000

I was playing with the new TextMate Markdown bundle for MultiMarkdown 3 when I remembered an old nit I had with the list commands: no single-keystroke way to move list items up and down. Unless I’m completely forgetting about a shortcut, moving list items around involves selecting the entire line and using Control-Command-Up/Down to move it. Obviously, not a big deal, but 5 minutes with the Macro recorder in TextMate saves the time.

Control-Right and Control-Left are already set up in the Markdown bundle to indent and outdent lines within lists. These two macros just add Control-Up and Control-Down for quickly shifting the order of a list. They only work with single lines; if you want to move a chunk of lines, you’ll want to use the old select and hit Control-Command-Up/Down method.

You can download the TextMate List Macros from here, but for more details, check out the video I added to the Blogsmith Bundle Video Site.

Here’s a quick, semi-related tip: TextMate’s Web Preview running through MultiMarkdown 3 is wicked fast. There’s no visible latency. It’s practically an nvALT killer for people who primarily use nvALT for its MultiMarkdown preview. Definitely give it a shot. Fletcher Penney’s video on setup and usage is all you need. Well, that and MultiMarkdown 3. By the way, the next release of nvALT deals much better with custom MultiMarkdown 3 installs. Coming soon.

Originally posted on BrettTerpstra.com at A couple of TextMate Macros for Markdown lists

Automating HTML5 video encodes

Brett — Mon, 28 Mar 2011 00:19:08 +0000

I spent an inordinate amount of time not doing useful things today. During this non-productivity bender, I got a little obsessed with making the HTML5 video encoding process easier. I’ve been working on a tutorial site for the Blogsmith Bundle, so this whole deal needed to be sped up. I came out with a script which, when combined with the right command line utilities, takes 90% of the manual labor out of creating the multiple formats needed.

HTML5 video, if you’re not familiar, provides a means to supply modern browsers with high-quality video without using Flash. It works across iOS devices beautifully, and the markup is highly semantic. The problem is that every browser has chosen a different format to promote, and using HTML5 video effectively means providing the same video in three formats (OGV, MP4, WEBM). Then, you need to code in a Flash fallback for older browsers. This would all be fine if my usual video conversion tools had a multiple-encode feature. They don’t. The only one that comes close is Evom, which has an HTML5 preset to encode OGV and MP4 at the same time, but the OGV files won’t play in Firefox and it can’t do WEBM at all right now.

So, taking matters into my own hands…

The workflow

Here’s the workflow I’m using now:

Export a screencast as an MP4 file to a bucket folder
Hazel detects a new MP4 file and runs a shell script on it which:
1. Creates a new folder based on the file’s base name and moves the file into it
2. Runs an ffmpeg sequence to create a webm version
3. Runs an ffmpeg2theora command to create an ogv
4. Uses ffmpeg to create a poster image from the first frame of the mp4
5. Uses rsync to put the finished folder on my server
I get a growl notification from Hazel that files are converted and uploaded
I insert the ungodly-long “shortcode” for the VideoJS plugin using TextExpander into a new WordPress post.

Four steps, and I only have to interact with two of them. The script is pretty hardcoded for my setup, but I moved some of the config up to the top for convenience. You’ll need ffmpeg and ffmpeg2theora installed, both of which are really easy to set up with homebrew. You can probably find binaries, too, but I just used brew for these.

The script

Here’s the script, hope it helps someone else, too:

#!/bin/bash
# html5encode.sh
# Brett Terpstra, 2011 - http://brettterpstra.com/automating-html5-video-encodes
# Requires ffmpeg and ffmpeg2theora
##################
### CONFIG #######
MAXSIZE="960x540"
SSHURL="username@your.webserver.com"
SSHDIR="/www/video/media/"
### END CONFIG ###
 
INPUT=$1
DIRNAME=`dirname "$INPUT"`
FILENAME=`basename "$INPUT"`
BASENAME=${FILENAME%%.*}
 
cd "$DIRNAME"
if [ -d "$BASENAME" ]; then
  # /usr/local/bin/growlnotify -s -i "Terminal.app" -m "Found $FILENAME, but directory $BASENAME already exists. Aborting"
  exit 1
fi
mkdir "$BASENAME"
mv "$FILENAME" "$BASENAME/"
cd "$BASENAME"
 
/usr/local/bin/ffmpeg -pass 1 -passlogfile "$FILENAME" -threads 16  -keyint_min 0 \
-g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i "$FILENAME" -vcodec libvpx -b 614400 \
-s $MAXSIZE -aspect 16:9 -an -y temp.webm
 
/usr/local/bin/ffmpeg -pass 2 -passlogfile "$FILENAME" -threads 16  -keyint_min 0 \
-g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i "$FILENAME" -vcodec libvpx -b 614400 \
-s $MAXSIZE -aspect 16:9 -acodec libvorbis -y "$BASENAME".webm
 
rm temp.webm
rm *.log
 
/usr/local/bin/ffmpeg2theora --videoquality 5 --audioquality 1 --max_size $MAXSIZE "$FILENAME" -o "$BASENAME.ogv"
/usr/local/bin/ffmpeg -i "$FILENAME" -ss 0 -vframes 1 -vcodec mjpeg -f image2 "${BASENAME}Poster.jpg"
cd ..
rsync -v -r -e ssh "`pwd`/$BASENAME" $SSHURL:$SSHDIR

The Hazel rule I’m running simply looks for files in the bucket folder with the .mp4 extension and passes them to the shell script.

Let me know if you have a better way to automate this. Also, let me know if you’ve found a good way to encode h.264 from the command line on a Mac. I haven’t been able to get ffmpeg to compile with x/h.264 support yet, but it was irrelevant as I had to output some format to begin with. Might as well save to the one format I can’t encode properly from a shell script…

Originally posted on BrettTerpstra.com at Automating HTML5 video encodes

Quick notes on cross-browser HTML5 video

Brett — Wed, 15 Sep 2010 14:49:29 +0000

I’ve been doing some screencasts lately, and have wanted to post them as HTML5 videos in many cases. I also wanted to serve them from my Cloudfront CDN. This is not a how-to post, just some things I learned that I couldn’t find existing answers to. For an excellent primer, see Video On the Web from Dive Into HTML5.

I kept running into hurdles, whether it was the content-type of the file being served, or the OGV encoding not working in Firefox, weird sizing, slight variations in syntax, etc. So here are my notes on how I got from ScreenFlow to a cross-browser HTML5 video embed. They may not be of much use outside of that situation, but they might help somebody.

1. The only way I could get an OGV file that actually played in Firefox was to export from ScreenFlow in a DV format, and use Evom or ffmpeg2theora to convert. Note that Evom requires the file extension to be mov, as it doesn’t recognize (and won’t accept) dv files. Evom has a setting called HTML5 that will create both MP4 and OGV files. 2. Aside from writing my own Ruby scripts to handle the upload to my Amazon S3 account, Transmit is the only app I could find that would let me automatically set appropriate MIME headers on uploaded video files, and allow me to automatically make them public. I now have a Transmit droplet in Dropzone that will upload my files directly to the S3 bucket that my Cloudfront account uses, set their Content-Type to video/ogg and video/mp4, respectively, and make them public-readable. 3. The embed code is a little bit flexible, with parameters like “preload” and “autobuffer” seemingly being interchangeable. My current, working embed code looks like:

With those steps in place, I’ve got video that plays (and looks decent) in Safari 5, Firefox 4 and Chrome. Obviously, I’d normally want a Flash fallback, but given that the videos I’m currently working on are about Safari 5, I’m not overly concerned whether Internet Explorer can see them or not. There’s always good-looking plugins like FlareVideo if that’s a requirement.

Originally posted on BrettTerpstra.com at Quick notes on cross-browser HTML5 video

My weather report. Seriously.

Brett — Wed, 26 May 2010 02:15:54 +0000

I did some massive Spring cleaning over the weekend, and found a lot of “treasures” that, after having been momentarily cherished, are on their way to the dump. A pile of Dead Kennedy’s and TCHC cassettes from High School that had been severely devastated by an extended stay in the garage, original vinyl pressings from some of my old bands, Phreak boxes, and more defunct electronics than I could possibly E-bay. Amongst all of it, though, I found a CD of work from my Interactive Multimedia degree at the Minneapolis College of Art and Design. Aside from my diploma, it’s really the only proof I have left that I was ever there. There was definitely some interesting work on there, though.

We were given a weather report from a local cable station. Our assignment was to make it interesting, and this is what I did with it. The sound design, especially, makes me chuckle.

httpv://www.youtube.com/watch?v=6WUmr9FM3GY

YouTube Link…

Thank you. That is all.

Originally posted on BrettTerpstra.com at My weather report. Seriously.