Webブラウザで動画編集！ - Yanagi Entertainment

html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング
http://d.hatena.ne.jp/favril/20100225/1267099197

昨日この記事を見て、これはすごい！　すごいすごい！　ってなって、これができるんならWebブラウザだけで動画編集できるんじゃね？　と思ったりしたので、ざっくり作ってみました。

http://yanagiatool.appspot.com/jsvideo/player.html　（MacのSafari4で動作確認。QuickTime + ChromeならWindowsでもいけるかも？）

あそびかた

「動画を読み込む」ボタンを押すと、テキストボックスに入ってるurlの動画を読み込みます。「state」って書いてあるところが「stand by」になったら「再生 / 停止」ボタンを押してください。
あとは再生しながらスライダーを動かしたりすると、なんだか楽しい感じになります。

（※ Google Chromeだと透過度パラメータが反映されないようです。）

テキストボックスにはデフォルトで
http://www.youtube.com/demo/google_main.mp4
を入れてますが、

ウリ

HTML5 + JavaScriptのみの実装です。

作ってて思ったこと

「Webブラウザで動画編集」は幻想じゃない

HTML5とJavaScriptだけでも編集ソフト作れますね。今回はUIつけてませんが、カット編集もできます。アニメーションもできます。
作ってる最中は「パフォーマンス的に厳しいかな？」と思ってましたが、軽いコーデックの動画ならElisとほぼ同じ速度で動きます。
編集結果の書き出しは、連番画像をbase64で出力するとか、最終的なレンダリングはサーバー側で行うとかすればできそうですね。

編集ソフトをWebアプリとして作る意味

編集ソフトがWebとつながることで、Webの資源に簡単にアクセスできるようになります。
今までローカルにファイルを保存しないとできなかった、「zoomeとニコニコの動画を使ってマッシュアップ」みたいなことがwebブラウザだけでできるようになります。
「Flickrから画像を選んで、YouTubeから音楽を選んで、スライドショーの動画を作成」みたいなこともwebブラウザだけでできるようになります。
これってすごく面白いことだと思いませんか？

動画編集ソフトウェアを簡単に作れる時代がやってきた

今まで、動画を扱うソフトウェアを作るのはすごく面倒でした。
「よし作るか！」という気になっても、まずは画像処理、音声処理、動画処理、資源管理、描画処理、その他もろもろのライブラリとかフレームワークとかを探すところから始めないといけません。使うライブラリが決まったらライセンスに矛盾がないか確認して、リンクして、動かしてみて、「えっ、このフレームワークってGCと一緒に使えないの？」みたいなことがあったりして、とにかく面倒です。

でも、今ならHTML5とJavaScriptだけで動画を扱うソフトウェアを書けます。
もしあなたがJavaScript プログラマなら、今すぐに動画を扱うソフトウェアを作ることができます。

面白い未来が、楽しい未来が、すぐそこまで来ている気がします。