HTML5で動画を再生する方法

1. MP4形式の動画をHTMLに埋め込んで再生しよう

MP4形式の動画をHTMLに埋め込んで再生しよう

別記事にてECサイトにYoutube等の動画コンテンツを設置する方法を公開しておりますが、今回はスマートフォンで投影したり、動画編集ソフトを使って作成したmp4動画をHTML5ページに埋め込んで再生するための方法を紹介します。

実際の商品の動きや音などを確かめる際に、動画は大変有効です。最近では動画でのマーケティングが盛んになっていることもあり動画を利用することが非常に効果のある施策になっています。
ECサイトなどでは購入につながる可能性も高くなるので、覚えておくと大変便利です。

video要素について知っておこう

HTML5では動画を再生するために、video要素が追加されました。以前はFlashなどプラグインをインストールしないとブラウザ上での動画再生はできませんでしたが、このvideo要素の登場でHTMLへの簡易な記述で動画再生ができるようになりました。

video要素はHTML5以前にもあったimg要素と使い方が似ています。同じような感覚でコーディングするとうまく埋め込めるのではないでしょうか。

動画の設置方法

デモ

<video controls width="320">
  <source src="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4" type="video/mp4">
  <a href="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4">動画を再生</a>
</video>

ポイント

source要素のsrc属性にデータのアドレス（URL）を設定します。
control属性によって再生・停止ボタンなどを含むコントローラーを表示。※属性名だけで指定可。
video要素に未対応の古いブラウザを使った場合に動画ファイルダウンロードのためのリンクを設置します。

video要素に対応しているブラウザ/バージョンを調べる

　【応用①】自動再生とループ再生

デモ

<video controls autoplay loop width="320">
  <source src="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4" type="video/mp4">
  <a href="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4">動画を再生</a>
</video>

ポイント

autoplay属性でページが読み込まれたら自動再生します。
loop属性で再生を繰り返します。

　【応用②】動画を再生する前に表示する画像を設定する

デモ

<video controls width="320" poster="http://ichikawa-advance.aispr.jp/shock.png">
  <source src="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4" type="video/mp4">
  <a href="https://www.aiship.jp/material/movie/cat_in_the_sun.mp4">動画を再生</a>
</video>

ポイント