jQuery seeThruは動画にリアルタイムにアルファチャンネルを当てはめて動画を透明にするライブラリです。

HTML5によって動画をJavaScriptから扱いやすくなったこともあって、videoタグやCanvasタグを使った面白い試みが増えています。今回は動画の一部に透明度を持たせるjQuery seeThruを紹介します。


上が元動画。下がそのアルファチャンネルだけの動画です。


下がその合成動画。背景が透明になっています。


こちらも。これは静的なマスクを作って、それを当てはめています。


マスクが当たった場所は透明になっています。

JavaScriptを使って動画の一部をリアルタイムに透明にしてしまうというのは驚きです。これを使うと動画の一部だけを再生するなんてこともできそうです。

jQuery seeThruはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

MOONGIFTはこう見る

HTML5はデスクトップ向けに提供するにはまだ敷居が高く、対応しているブラウザも少ないので二の足を踏んでしまっていないでしょうか。ビジネスとして捉えればまだ時期尚早な部分はあるかも知れません。しかしエンジニア、デザイナー個人としてみればまさにチャンスの宝庫とさえ言えます。

まだ誰も試したことのない真っ白なチャンスの下地がたくさん転がっています。失敗しても何も失うものはないでしょう。ぜひ新しい技術、新しい仕様にチャレンジして面白い結果を出してください。思わぬチャンスにつながる可能性だってあるはずです。

jQuery seeThru | a jQuery-plugin for HTML5 video with alpha channel transparencies | Moving Alpha Demo

jQuery seeThru | a jQuery-plugin for HTML5 video with alpha channel transparencies | Static Alpha Demo

jQuery seeThru | a jQuery-plugin for HTML5 video with alpha channel transparencies | External Controls Demo

m90/jquery-seeThru