上記の動画が再生されていますか？ブラウザが対応していない場合は、静止画が表示されます。
また、iOS（スマホ・タブレット）では自動再生ではなく、再生ボタンが出てきているハズです。
動画サイズ……幅468pix高さ58pix
再生時間……10秒間
音声……なし
ビットレート……200kbps
データサイズ……256KB
こちらはビットレートを上げた動画です。データサイズは2.4倍ですが、画質が2.4倍かと言うと、そうでもないですね。
動画サイズ……幅468pix高さ58pix
再生時間……10秒間
音声……なし
ビットレート……500kbps
データサイズ……621KB
前置きが長くなりました。今回はVideoStudioで縦横比を変更した動画を作る方法を紹介します。
縦横比を変えた動画はいくつか作り方がありますが、今回は……
（１）VideoStudioで任意の縦横比にしたaviファイルを作る
（２）フリーソフトでaviをmp4に変換する
（３）サイトに貼り付ける
という流れで解説します。
（１）VideoStudioで任意の縦横比にしたaviファイルを作る
まずは任意のフレームサイズで動画を作成します。
設定→プロジェクトのプロパティを開きます。
プロジェクトの形式をDV/AVIに選択して、プロファイルを新規作成します。同サイズの動画を今後も制作する場合は、プロファイル名を設定しておきましょう。
フレームサイズをユーザー定義にして、動画の幅と高さを決めます。サイトで使う予定のバナーサイズに設定するとよいでしょう。
圧縮は「なし」を選択します。圧縮を掛けるとフレームサイズを任意で設定できなくなります。
プロジェクトサイズを変更したら動画を制作します。制作は通常の操作と同じですが、縦横比を極端に変更した「横長・縦長」動画では、静止画を読み込ませると画質が荒れやすいです。画像をモーションで動かす場合は、短辺ピクセル数の2倍までを目安に、画像サイズを調整するとよいでしょう。
動画は、カスタム→Microsoft AVIファイル[*.avi]で出力します。その他の形式でも出力できますが、フレームサイズが設定のまま出力されるか、プロパティウインドウから確認しておきましょう。
（２）フリーソフトでaviをmp4に変換する
出力したaviファイルを、フリーソフトでmp4形式に変換します。
変換に使えるソフトはいくつもありますが、当方で使っているのは「XMedia Recode」です。ビットレートを細かく調整できるので、バナー型の動画制作に向いています。ソフトの概要と入手は下記URLからどうぞ。
XMedia Recode（窓の杜）
http://www.forest.impress.co.jp/library/software/xmediarecode/
インストール後、XMedia Recodeを起動します。
出力したaviファイルをドラッグして読み込ませます。
「形式」タブを開いて、プロファイル：カスタム、形式：MP4、ファイル拡張子：MP4 に設定します。
「ビデオ」タブを開いて、コーデック：MPEG-4 AVC/H.264、レート制御モード：2-Pass 平均ビットレート、ビットレート：500に設定します。
レート制御モードを2-passにするのは、できるだけデータサイズを抑えながら画質を向上させるためです。この出力方法はレンダリング時間が掛かるのが欠点ですが、バナーサイズの動画であれば、出力に時間は掛かりませんので、2-Passで画質を上げる方が良いでしょう。
ビットレートは下げるほどファイルサイズと画質が下がります。動画のサイズにより、最適なビットレートは異なりますので、テスト出力しながら適切な数値を探します。冒頭のサンプルはそれぞれビットレート500と200なので、画質の参考にしてみてください。
ビットレート等の設定が終わったら、ファイル名を選択した状態で「リストに追加」を押します。
リストに追加を押すと、エンコードボタンがアクティブになります。ウインドウ最下部の保存先を確認して、エンコードボタンを押します。
縦横比をカスタマイズしたMP4ファイルができました。WEBサイトへの貼り付けを前提とする場合、画質を維持できる範囲で、できるだけビットレートを下げてファイルサイズを抑えるのがポイントです。何度かテスト出力して最適なバランスを探してみましょう。
（３）サイトに貼り付ける
出力したMP4動画をWEBサイトに貼り付けます。 ブラウザが対応しない場合に備えて、代わりに表示する静止画も用意しておきます。
まずは、ブラウザが動画再生に対応しない場合に、動画の変わりに表示する画像（以後ポスターと呼びます）を準備します。
縦横比を変更した動画の場合VideoStudioの「編集→静止画として保存」では、画像が乱れてしまうため、動画のスクリーンショットを取って、画像編集ソフトで切り出します。
実際の貼り付けコードはこんな感じです。
<video src=”動画URL” poster=”ポスター画像URL” autoplay=”autoplay” loop=”loop” controls=”controls” width=”468″ height=”58″></video>
widthとheightはフレームのサイズ指定ですが、動画サイズが適切なら削ってもよいです。
autoplay……動画を自動再生
loop……動画を繰り返し再生
poster……ブラウザの仕様により、動画が再生されない場合に変わりに表示する画像
controls……動画のコントローラーを表示。iOS（iPhone/iPad）での表示に必要。
バナー用途の場合、autoplayとloopは付けておくと良いでしょう。loopを外している場合、動画は最後のフレームで静止します（ブラウザリロードでご確認ください）。
■実用例
画像の赤枠の部分を動画にしています。ブラウザが対応していない場合は、ポスター画像が表示されますので、リスクはありません。
http://www.digitalsignage-kure.jp/
動画のサイズ……711KB
ポスター画像（PNG）……613KB
この事例では、高画質な静止画よりも圧縮を掛けた動画の方がデータサイズが軽くなる逆転現象が起きています。画質を見ながら圧縮を調整することで、閲覧の快適性を維持したまま動的な効果が実現できるわけです。