After downloading the qt_tools I ran it from the terminal:
/Users/john/bin/qt_proofsheet /Users/john/Movies/twilight\ videos/The\ Twilight\ Zone-Perchance\ to\ Dream\ part\ 2.mp4 /Users/john/Movies/twilight\ videos/perchance480.jpg -spacing=0 --title=0 --duration=100,120 --replacefile -1 --framesperrow=1 --framesize=480 --framerate 2
That is
This is the style block: <style type="text/css" media="screen"> #perchance { margin:auto; width: 576px; height: 410px; background-image: url("perchance480.jpg"); -webkit-animation: play 10s steps(20) infinite; -moz-animation: play 10s steps(19) infinite; -o-animation: play 10s steps(19) infinite; animation: play 10s steps(19) infinite; } @-webkit-keyframes play { from { background-position: 0 8180px; } to { background-position: 0 22px; } } @-moz-keyframes play { from { background-position: 0 8180px; } to { background-position: 0 22px; } } @-o-keyframes play { from { background-position: 0 8180px; } to { background-position: 0 22px; } } @keyframes play { from { background-position: 0 8180px; } to { background-position: 0 22px; } } </style> In the blog I change all the returns to spaces. And it is displayed in a div: <div id="perchance"></div>