【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

HTML5で動画を再生する方法

HTML5で動画を再生する方法

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

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

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

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

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

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

動画の設置方法

デモ

<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動画の埋め込み方法」もあわせてご覧ください。

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+