junaioでアルファ付き動画を表示させる | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

junaioでアルファ付き動画を表示させる

20140304

年明けから備忘録の更新が滞っております。気が付いたら3月です。

junaioでのアルファ付き動画作成方法の詳しい説明ページ(日本語)が、無いようなので自分の備忘録もかねて掲載します。

アルファ付き動画の作成手順

取敢えず動画の作成なので、Adobe Premiere Proを使用してみる事にします。
まずjunaioでは、左側がクロマキー動画、右側がアルファ付きの白黒動画になっている一つの動画を作成しないといけないらしい。

こんな感じの画像!

junaio20131224-1

この状態の動画を作って設定すると、あとはjunaioのシステム側で背景を消してくれるらしい!!

規定通りに、Premiere Proでアルファを付けた白黒動画を作成してみる。
左側に通常動画、右側にアルファ付き白黒動画を並べた状態の動画を作成し、適当な動画ファイル(aviなど)で書き出してみた。
それをサクッと3G2形式に変換し、適当な名前を付けてサーバにアップロードする。

けっこう簡単にできたので、ちゃんと背景が透過しているかモバイルデバイスで確認してみる。

が、透けてない?!背景が黒のまま、しかもアルファを持たせている白黒の右側まで映ってるし。

なぜ?!

何度か、保存する拡張子などを変更して試してみるが、いずれも同じはめに…。

junaio公式チュートリアルを再確認

何度やってもダメなので、もう一度junaioの公式チュートリアルを再チェックしてみる。

すると「アルファを持たせた元ファイルは、FLV形式がいいよ!」みたいな事が書いてあるので、とりあえず、Premiere Proでアルファ付き動画をFLV形式で保存。
書き出す時に、「ビデオ」タブの「アルファチャンネルをエンコード」にチェックを入れる。

さらに下のほうに、「3G2形式へのエンコードには、FFmpegを使ってね!!」みたいな事が書いてあるので、チュートリアルページから、FFmpegとjunaioが用意しているヘルパースクリプトをダウンロードする。
ダウンロードしたすべてのファイル及び、FLV動画を同じフォルダに入れて、パソコン内に設定する。

私の場合、Cドライブ直下に「ascript」フォルダを設置。

FFmpegは、コマンドプロンプトで操作しないとだめなので、
ファイルを設置したフォルダまでコマンドプロンプトで移動して(cd c:\ascript)

20131224-2

公式チュートリアルに書いてある「encode.vbs ファイル名.flv」を打ち込んで実行(Enter)!

20131224-3

すると、ファイル設置フォルダ内に、3G2形式の「out.alpha.3g2」ファイルが出来上がる。
できた動画ファイルの中を見てみると、元動画とアルファ付きの白黒動画が左右に分かれた状態の一つの動画を自動で作ってくれた。

Premiere Proで苦労して作ったのは、なんだったんだろうか?!

できたファイルをチャンネルを設置しているサーバにアップロードし、再びモバイルデバイスで確認すると、ちゃんと背景が透過した状態で表示されました。

コメントは受け付けていません。