*1  ffmpeg で動画のサムネイルを作る

ffmpeg を使って H.264 などの動画ファイルから Jpeg 画像のサムネイルを作ることが出来る。以前にも書いたが debian 公式の ffmpeg だと色々とコーデックが足りないので
deb http://ftp.nerim.net/debian/ unstable main
から取得している。ffmpeg で h.264 動画からサムネイルを jpeg で得るには次のようにすれば良いようだ。
ffmpeg -i <input.mov> -f image2 -pix_fmt jpg -vframes 1 -ss 1 -s 640x480 -an -deinterlace <out.jpg>
-s でサイズ、-ss で何秒目の画像を取得するかを指定している。手元では zsh の foreach を使って以下のように回している。
foreach i (*.mov)
ffmpeg -i $i -f image2 -pix_fmt jpg -vframes 1 -ss 1 -s 160x120 -an -deinterlace thmb_`basename $i .mov`.jpg
end

*2  imagemagick でサムネイルにアイコンを付与する

このままだと他の静止画像ファイルサムネイルと並べたときに見分けが付かないので、適当な QuickTime のアイコンを Google Image から拾ってきて、imagemagick の composite コマンドで合成する。アイコンサイズは 40x40 にしたもので、160x120 の画像右下に表示。
composite -compose over -geometry +120+80 qticon.gif $i <out.jpg>
できあがりはこんな感じ。CSS で重ねた方がいいかもしれないけど、きれいなやり方が思いつかなかった。

画像へのリンクへ Thickbox を採用

Posted by yoosee on Web at 2007-04-07 22:00 JST

*1  ThickBox 2.1.1

画像のリンクがあまりにそっけなかったので、jQuery.js を使った画像ポップアップライブラリ ThickBox を導入してみた。基本的にはダウンロードしたものをどこぞに置いて <head> 内から link と script 要素で読み込み、ポップアップさせたい画像の <a> 要素に class="thickbox" を付けるだけ。複数画像がある場合は rel="グループ名" でまとめる(Prev, Next リンクを出す)ことが出来る。サンプルは過去のネコ戯れ画像。JavaScript が有効な環境では画像をクリックすると画面にシェードがかかってリンク先画像がポップアップ表示されるはず。

class="thickbox" を付けないと対象にならないようなので、うちの blog 今の時点では新規画像に付いてのみ適用される。過去画像についてはその周りの span 要素に特定 class があるから thickbox.js をいじれば対象に出来そうな気がする。どのみちあまり時間がないので後ほど。それと thickbox.css が * { margin:0; padding: 0; } を指定しているのが気に食わなかったので消してみたが、レイアウトに問題無さそうに見える。これも後ほど要確認。

*1  ImageMagick は http を話せる

まさしく trivia な知識だが、ImageMagick (6.2.4.5-0.7) の convert コマンドは SRC に http://xxx.example.com/foo/bar.jpg のように URI を指定して実行できる。こんな感じ
 % convert -resize 320x480 http://foo.example.com/bar.jpg baz.jpg 
ちなみに strace で追ってみたところ、/tmp/magick-xxxxxxxx と言う一時ファイルを作り、自分で inet socket を開いてファイルを取得しているらしい。サーバ側のログを見たところ、User-Agent は空で、どうも HTTP/1.0 を話している感じがするが、その割には VirtualHost でも大丈夫だった。よくわからん。

About W.W.Walker

World Wide Walker は yoosee による blog です。PDA, Web・サーバ技術, 美味しい食べ物などの話題を取り上げています... read more

Monthly Archives

Select Month to read
  

Ads

Recent Entries

Related Sites