aratana Tech blog

ECテクノロジーで 世界をもっと楽しく もっと笑顔に

WEBサイトに動画を使用する際にハマったこと

こんにちわ!アラタナでデザイナーをやってます岩切です。

最近社内に「岩切」という名字のメンバーが増えてきて、家族が増えたように嬉しいです(嘘


この記事はaratana Advent Calendar 2017の18日目の記事です。

アラタナアドベントカレンダー
 

さて、今回は最近リニューアルしたコーポレートサイトにて、映像を使う際にハマったポイントを共有したいと思います。

これまで何度かサイトに動画を~ということをやったことがあったのですが、時代の変化と共に、実装方法も色々と多様化しており、さらにはデバイスの解像度の幅も広がり、解像度も上げねば!

でもモバイルの環境ではどうなんだ!?

と時代に合うサイトにしようと、対策を色々と探しました。

 

まずは、実際に背景に動画を使っているサイトを探しました。

 

Abema tv:リクルートサイト
recruit.abematv.co.jp


 

リブセンス:リクルートサイト
recruit.livesense.co.jp


 

DeNA Games Tokyo

denagames-tokyo.jp


 

どのサイトもカッコイイな~。

 

次に、実装についても色々と調べました。

Youtubeを使っているサイトやvideoタグで実装しているサイト、jQueryプラグインを使っているサイトなど、様々でした。

見る側の負担をかけないようにするには、Youtubeにアップして使うか、はたまたVimeoの有料サービスを使うか

と迷いましたが、youtubeはロゴが動画に入ってしまう。Vimeoは有料・・・。

 

むむむ!!自分でなんとかしたい!!

と再度考え直すことに。

 

色々と調べるうちに、videoタグは、mp4であれば、プログレッシブダウンロードに対応しているという情報をメンバーが教えてくれました。

 

 

videoタグで、mp4で~と早速動画をAdobe Aftereffectsで編集。

レンダリングは、Adobe Media Encorder CCを使用しました。

 

mp4で書き出し、サイトに設置しますが、動画の読み込みが完了しないと再生がはじまりません。。

f:id:tekgraphixx:20171218092022p:plain

あれっ?そういうものなのかな?と他のサイトも色々と見てみますが、どのサイトも読み込みが完了する前に動画が再生されています。。

 

書き出しの設定があるのかな?と思い、「動画 書き出し WEB」などで色々とみていると「ファストスタート」や「moovatomを先頭に」というキーワードがちらほら出てきました。

 

動画を早く再生させるには、ファイル情報の先頭に「moovatomを先頭に含める必要がある」と。

ファストスタート?moovatom?と何も知らなかったので、めっちゃ検索しました。

 

moovatomがファイルの先頭にあるかを確認するには、専用のソフトウエアが必要で、しかしwindowsのソフトはあっても、macにはありません。。

これはどうしたものか・・・。

 

もしかすると、設定の項目があるんじゃない!?と、メディアエンコーダーの画面を確認しますが、どこにもファストスタートの設定ができるような箇所がありません・・・。

 

さらにさらに、検索すると

 

過去にAdobeに質問した方のサイトがでてきました。

そこでは「Adobeのメディアエンコーダーでは、moovatomは基本的に先頭で設定されているので、ご自身で設定する必要もないし、設定するメニューもない。」とのこと。

 

えっ。そうなの?でも再生されないんですよ・・・。

 

しかし、愛するAdobe製品を信じて、書き出しの設定を色々と試すことに。

 

試し、試し、試し、たm・・・。

 

色んなパターンを試しているうちに、以下の設定にたどり着きました。

f:id:tekgraphixx:20171218092045p:plain

「オーディオあり」「ビットレートはCBR」

 

この書き出しで、再度サイトに反映!!

 

コンソールのNetworkで確認すると、読み込み完了前に動画が再生されました!!!

ひゅー!!

 

 

ということで、今回の事をまとめますと

 

「mp4」「オーディオあり」「ビットレートはCBR」

 

この3点でハッピーになれます!!

 

今回も色々と壁にぶつかりましたが、おかげで経験値が増えました!よかったよかっった!今後もガンガン壁ぶつかりまくります!

 

 

今回大変お世話になったサイト

WEB動画作成時に”ムーブアトム(moov atom)を先頭に含める”ための具体的な方法 | 映像知識のメモ帳