当社のホームページに動画を使うことにしたので、改めてHTML5で扱えるようになった動画の重さについて考えさせられることになりました。
すでにお客様のホームページで動画を扱っていましたが、今回設置した動画ほど問題を抱えたことはありません。
HTML5で動画を設置する場合、最初のフレーム画像をposterとして設定します。
重い画像だとポスターフレームの表示が少し長い感じがしますが、それほど違和感なく動画が動いていました。
ところが、当社のものは動画がストップしたりするケースが頻発します。
重すぎるのかと思い、mp4の圧縮を強めたりしましたが、全然だめでした。
ホームページで動画を扱うのは光回線が一般化した現在でもスムーズに行かないケースがあるようです。
スポンサーリンク
HandBrakeで動画を圧縮／MOVをMP4に変換
当社では動画を圧縮するツールとしてHandBrakeを使っています。
MOV形式をMP4に変換することも出来るので重宝しています。
参照 Download HandBrake（handbrake.fr）
動画の圧縮は二通り。
Average Bitrateを調整
圧縮後の動画のクオリティは再生して確認しながら、Average Bitrateによって圧縮する数値を決定していきます。
ブロックノイズが気になるかどうかが動画クオリティの決め手になります。
Constant Qualityを調整
Constant Qualityは小さくすればするほど高画質となり、データが重くなります。
やはり出来た動画を確認しながらスライダーを動かして調整します。
結果
当サイトで使用した動画は画面全体が激しく書き換わるため、あまり圧縮することが出来ませんでした。
仕方なく別の方法を考えることに…
そこで、動画と静止画をランダムに表示することにしました。
テーマのカスタマイズ方法については次回記事にゆずることにします。
by T.Y.
