HTML5で作るWebベースのMoviePlayer

October 3, 2010

muWebPlayer2010-10-06.png

実は今までちゃんとWeb関連のプログラミングとかやったことありません。フォーム処理と文字列操作に終止するという先入観によるところが大きく、あまり興味もわきませんでした。もっとも文字操作とフォーム処理に終止っていうのは、AEのスクリプトも大して変わりませんが。

そんな私がHTML5デビューで作り始めたのがMoviePlayer。
色々調べるとHTML5のvideoコントロールは、各ブラウザで段階的に実装している途上であり、かつFirefoxは自身のポリシーなんか変なフォーマットに固執してたり、結構バラつきがあって全部サポートすんのは面倒くさい!...で、今回はMacOSXのデベロッパキット(Dashcode)で開発するということもあって、WebKitベースに絞っています。


まだ開発途上なので一部機能は公開できない状態なのですが、ちょっと試しに暫定版公開してみます。以下の動作条件と免責事項を確認の上、お試しください。


muWebPlayer version 0.4.17

動作環境
Safari 5.0.2 (Mac) , Google Chrome 6.0 (Mac/Windows)
注意 iOS版とWindows版Safariでは動作しません。Chromeでは逆方向の再生をサポートしません。


機能
標準の再生停止に加えて、スロー再生、早送り、逆再生が可能。ただし現状のデモではムービーのGOPの関係上、一部滑らかに再生できない機能があります。全部Iフレームにすれば、スローなども綺麗に再生できるのですが、ChromeがIフレームのみのMPEG4に対応していないようなので、見合わせ。
ムービーの背景の明るさを調整可能。
ムービーのサイズを無段階調整可能。
ムービーの不透明度を調整可能。(自分でもなんの役にたつのかわかんないけど)

In/Out点を設定し、その間をループ再生可能。
設定したIn/Out点へのジャンプが可能。

簡易カラコレ機能。ただし非常に重いのでムービーの再生はガタガタになります。
ガンマ補正は現状の出力済ガンマ1.0を基準に調整しています。デバイスガンマやソースの入力ガンマの補正値じゃありません。スライダを右に目一杯にすると2.2となり、入力ソースのガンマに逆ガンマをかけた状態(はやい話がリニアガンマ)になります。


使用上の注意
一部機能は非常に多くのメモリを必要とします。ブラウザの他のタブなどは閉じてください。特に入力途中のフォームなどは、ブラウザごと落ちる可能性もありますのでご注意を!
技術デモ用ですので、一部の機能は削除されてます。またファイル選択画面なども未実装。

免責
これのプレイヤーを試すことによりいかなる損害が生じても、作者は責任をとりません。
作者は作為的にあなたのブラウザの機能をそこなったり、ISPやLANに多大な負荷をかけるコード、セキュリティ上の不都合を生じるコードを含むことはしていません。が、万が一それらの損害が発生しても、作者は道義的、経済的責任を一切とりません。

(公開期間終了:次のバージョンまでお待ち下さい)