タグ: HTML5

「スリットスキャン」とは、こちらで解説されていますが、時間軸のある動画などを、フレームを動画上の場所ごとにずらすことで作られる特殊な映像効果、のようです。

アナログの時代はカメラの前に置いたスリットを動かすことで、デジタルになってからは動画編集ソフトで、こういった効果をつけているそうです。

プロが人の手で編集を加えれば、独特の不思議な映像はもちろんできるのですが、VimeoやYouTubeなどの動画サービスで再生している動画を、ブラウザ上でそのままスリットスキャンしてしまおう、というのがSha Hwangさんによるslitscanner.js。HTML5のビデオプレイヤーで再生できる動画をスリットスキャンで一枚の画像にまとめてくれるライブラリ(とライブラリを使ったブックマークレット)です。

上記ライブラリページのブックマークレットをブックマークしておいて、Vimeoで適当な動画を開き、右下の”Switch to HTML5 Player”で(Flashプレイヤーではなく)HTML5プレイヤーを使うようにしてから、ブックマークレットを実行すると、動画の再生にあわせてスリットスキャンした画像が作られていきます。

上の動画から作ってみたスリットスキャン画像がこれ。

フレームを取り込む間隔はスライダーで調整できますので、多少は編集的なこともできるかと。

もう一つためしてみました。

動きの早い動画だと細切れになりすぎて、よくわからない画像ができてしまいますね。Vimeoだけじゃなく、HTML5プレイヤーを使っていればYouTubeなどでも使えるのですが、YouTubeの場合は広告がFlash Playerで再生されるので面倒なことがあるとか。

うまくはまれば、長時間動画の雰囲気や盛り上がっているポイントを見つけるのに役立つかもしれません。

ブラウザで再生されている動画を、手元で加工することで面白くしたり発見したり、ということも、いろいろ出てくるのかもしれないですね。

via Slitscanning online videos

関連

マウスで操作出来るスリットスキャン – Flashで作られた、スリットスキャンを体験できるアプリ。横方向の動きがある動画と使うことで、ずらす感覚が簡単にわかるようになっています。