ASCII.jp：HTML5＋JavaScriptでビデオエフェクターに挑戦！｜古籏一浩のJavaScriptラボ

HTML5で追加される新機能の中でも、特に華やかなものといえば「Video」と「Canvas」でしょう。本連載でも、HTML5 Videoを使った3D動画プレーヤーやCanvasを使ったペイントツールなどを作成してきましたが、今回はこの2つの機能を組み合わせて「ビデオエフェクター」作りに挑戦します。

　ひとくちにビデオエフェクターといっても、アドビ システムズの「After Effects」のように事前にレンダリングしてムービーを作成するアプリケーションから、アップルの「Motion」のようにムービーを再生しながらエフェクトを処理するタイプ、さらにはVJ (Video Jockey/Visual Jockey）の世界で使われる「motion dive」のようなリアルタイムでエフェクトを加えられるアプリケーションまで、さまざまです。

　今回は、リアルタイムでエフェクトをかけながら動画を再生するWebページをHTML5とJavaScriptだけで作ります。さすがにVJ用アプリケーションのような処理は現在のブラウザーの性能では無理がありますから、多少妥協してMotionのような“ほぼリアルタイム”の処理を目指します（それでもかなりのマシンパワーを消費しますが）。

　PhotoshopやAfter Effectsのように「プラグイン」でエフェクトの種類を増やせるようにもします。エフェクトを定義するスクリプトはメイン処理とは別に作成し、他のサーバーにホスティングされているプラグインでも、URLさえ指定すれば利用できる仕組みです。

　なお、HTML5 VideoとCanvasに関してはすでに本連載でも説明していますので、今回は詳しく触れません。素材となる動画については、H264と Theora/Oggに変換されたファイルが用意されている前提で解説します。今回の記事を読む前に、以下の記事を読んで復習してください。

<広告> Webデザイン制作,Flash制作｜Flash Web Design｜リフォーム｜マンションリフォーム｜外壁塗装｜リフォーム 横須賀｜リフォーム 京都(大津)｜東京 横浜 横須賀 中古マンションリフォーム｜Isar Getriebetechnik KG｜Special gears and gearboxes｜SE構法(工法)｜SEO対策｜ホームページ制作(作成)｜WEBデザイン,FLASH制作簡単相互リンク｜リフォーム会社紹介所｜マンションリフォーム 京都｜中古マンションリフォーム｜リフォーム 大阪 神戸 北大阪 京都｜シングルマザー｜不動産 群馬県 高崎市｜軽井沢不動産｜SEO対策ツールのブログ｜リフォームのブログ｜Flash Web デザイン集｜Web,Flashデザイン｜WEB,FLASHデザイン制作 Bookmark｜餃子