WEB動画の圧縮方法(HandBrakeを使う)

当社のホームページに動画を使うことにしたので、改めてHTML5で扱えるようになった動画の重さについて考えさせられることになりました。
すでにお客様のホームページで動画を扱っていましたが、今回設置した動画ほど問題を抱えたことはありません。

HTML5で動画を設置する場合、最初のフレーム画像をposterとして設定します。
重い画像だとポスターフレームの表示が少し長い感じがしますが、それほど違和感なく動画が動いていました。

ところが、当社のものは動画がストップしたりするケースが頻発します。
重すぎるのかと思い、mp4の圧縮を強めたりしましたが、全然だめでした。

ホームページで動画を扱うのは光回線が一般化した現在でもスムーズに行かないケースがあるようです。

スポンサーリンク

HandBrakeで動画を圧縮/MOVをMP4に変換

当社では動画を圧縮するツールとしてHandBrakeを使っています。
MOV形式をMP4に変換することも出来るので重宝しています。

参照 HandBrake

動画の圧縮は二通り。

Average Bitrateを調整

圧縮後の動画のクオリティは再生して確認しながら、Average Bitrateによって圧縮する数値を決定していきます。
ブロックノイズが気になるかどうかが動画クオリティの決め手になります。

Constant Qualityを調整

Constant Qualityは小さくすればするほど高画質となり、データが重くなります。
やはり出来た動画を確認しながらスライダーを動かして調整します。

結果

当サイトで使用した動画は画面全体が激しく書き換わるため、あまり圧縮することが出来ませんでした。
仕方なく別の方法を考えることに…

そこで、動画と静止画をランダムに表示することにしました。
テーマのカスタマイズ方法については次回記事にゆずることにします。

by T.Y.

スポンサーリンク

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

制作実績一覧

おすすめ記事

最近の記事

– このブログを書いてる人 –

 

 

山本 朝次/Yamamoto Tomotsugu

 

クリエイティブディレクター

 

はじめまして。よろしくおねがいします。

 

柴犬が大好きです。

 

プロフィールはFacebookで。

 

Facebook

 
 
 

PAGE TOP