• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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

サポート部の市川です。
先月の記事ではYoutube動画の埋め込み方法をご紹介しましたが、
今回はスマートフォンで投影したり、動画編集ソフトを使って作成したmp4動画をページに埋め込んで再生するための方法を紹介します。

実際の商品の動きや音などを確かめる際に、動画は大変有効です。
ECサイトなどでは購入につながる可能性も高くなるので、覚えておくと大変便利です。

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

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

動画の設置方法

デモ

<video controls width="320">
  <source src="http://ichikawa-advance.aispr.jp/cat_in_the_sun.mp4" type="video/mp4">
  <a href="http://ichikawa-advance.aispr.jp/cat_in_the_sun.mp4">動画を再生</a>
</video>

ポイント

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

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

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

デモ

<video controls autoplay loop width="320">
  <source src="http://ichikawa-advance.aispr.jp/dog.mp4" type="video/mp4">
  <a href="http://ichikawa-advance.aispr.jp/dog.mp4">動画を再生</a>
</video>

ポイント

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

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

デモ

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

ポイント

  • poster属性に再生する前に表示する画像のアドレス(URL)を設定します。

終わりに

今回はFTPに動画ファイルを置いて、そこから読み込んで表示させていますが
Youtubeにアップロードした動画をサイトに埋め込む方法も便利です。
こちらの記事「Youtube動画の埋め込み方法」もあわせてご覧ください。

動画を使って面白いサイトにしてみてください。