Blog スタッフブログ

WEB制作のG・Yです。

WEBサイト上に動画を掲載することは特にECサイトでは商品の宣伝戦略などで非常に有効な手段といえます。とはいえ、動画をWEBサイトに掲載するにあたっては注意すべき点もいくつかあります。

今回はMP4形式の動画ファイルを直接サイト上にアップロードする際の注意点についてご紹介いたします。

MP4形式の動画は、以下の書き方でHTML上に表記することでサイト上に表示できます。

    <video controls class="samplemovie" src="home/movies/sample.mp4"
type="video/mp4">
    </video>

src=””にて動画ファイルのパスを指定し、表示します。

※サーバー上に、動画のMP4ファイルをアップしておくこと

■videoタグ使用のメリット

Youtube等の外部サイトにアップすることなく、サーバーとサイト間だけのデータのやり取りで済むので動画ファイルの管理が楽というメリットがあります。

Youtube側のいわゆる「誤BAN」に巻き込まれるリスクがないことも見逃せません。

特にプロモーション系の動画ではこのリスク回避は大きいと思われます。

■気を付けるポイント

videoタグを使う場合、そのままでは動画の最初のフレームがサムネイルとなってしまいます。
ホワイトインするような演出の場合、真っ白なサムネイルになってしまう…

そこで、以下のようにposter属性を指定することで、動画のサムネイル画像を自分で決めることができます。
サムネイルにしたい画像をあらかじめ用意しておきましょう。

    <video poster="home/images/background.jpg" class="samplemovie" src="home/movies/sample.mp4"
type="video/mp4">
    </video>

■controls属性を指定する

controlsを指定することで動画の再生・停止等の操作を行うメニューが表示されます。

これがないとユーザビリティが著しく落ちるため、忘れないようにしましょう。

■容量に注意

動画ファイルは基本的にとても重いため、

サイトの読み込みに負荷がかかりやすいという問題があります。しっかり圧縮して容量を節約しましょう。

ASPカートの無料プランのような極端に容量制限の厳しい環境下では動画の使用を控えた方がいいでしょう。