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>