Webサイトに動画を表示させたい!viedoタグで動画を簡単に埋め込む方法【HTML5】

皆さまこんにちは!坂井です(^o^)

4月より社会人2年目となる私。
仕事も色々覚えてきて、Webサイトを管理したり、
作成したり日々奮闘中でございます。

最近Webサイトに動画を表示するために、
HTML5のvideoタグを初めて使いました!

これを使うことで簡単にWebサイト上に動画を表示することが出来ます!
とっても便利です(^o^三^o^)

今回はWebサイトに動画を表示させたいという方、
そして自分用のメモ(笑)としてvideoタグのご説明をいたします。

1.videoタグの使い方

まずは動画を用意しましょう!
今回はMP4の動画を使います。
動画サイズが大きいと表示が重たくなるので注意。
私が使用した時は動画時間が25分~30分と長めでしたが、約200MBにサイズを圧縮して特に重くならず表示ができました。
動画が用意できたらコーディングに入ります。
出ました!videoタグです!

<video controls>
  <source src="movie/sample.mp4">
</video>

サンプルを見る

videoタグ
動画が表示されましたでしょうか?
動画ファイルのURLの指定はvideoタグ内のsourceタグを使用します。
すごく簡単!動画はこのタグで表示出来ます!

2.videoタグの属性

videoタグの属性は様々ありまして、
幅・高さの指定は勿論、動画の自動再生やループ機能など設定することが出来ます!

■width・・・動画の幅を設定
■height・・・動画の高さを設定
■autoplay・・・ページを開いたときに動画を自動再生させる
■controls・・・動画のコントロールパネルを表示
■loop・・・繰り返して再生させる
■muted・・・動画音声のミュート設定
■poster・・・動画を読み込めない、再生できないときに表示させる画像の設定
■preload・・・ページ読み込み時に、動画をあらかじめ読み込むかどうかを設定

例えば動画を自動再生させたい!ループさせたい!動画のコントロールパネルを表示させたい!という方は、
autoplay,loop,controlsの属性を追加すれば可能です!

<video autoplay loop controls>
  <source src="movie/sample.mp4">
</video>

サンプルを見る

3.使用する時の注意点

videoタグを使用してPCでページを見て動画の表示が確認できました。
よし、スマートフォンでも見てみよう!

再生ボタンポチー

動画が表示されない…

PCでは再生されたのにスマートフォンでは再生できない。
私は作業中にこのような不具合に出会いました。

なぜスマートフォンだけなのだろう…動画が再生されない…
しょんぼり
しょんぼりしていた私ですが原因を調査したところ、簡単に判明しました。

それは…

ページにベーシック認証がかかっていた…

ベーシック認証とは?

Webページにユーザ名・パスワードをかけて閲覧する人を制限させるもの

スマートフォンの機種によっては、ベーシック認証をかけているページの動画は表示できないということが起きます。
一時的にベーシック認証を外してもう一回スマートフォンで見ると動画が表示されました!
これで一安心!

4.まとめ

初めてvideoタグを使用しましたが、こんなに簡単に動画を表示できるとは思いませんでした。
動画さえ用意すれば簡単に出来ます(^o^)

今回は、動画の表示のみにvideoタグを使用しましたが
使い方によってはもっと便利に、Webサイトデザインのツールとして使うことが出来ます!

■参考サイト
Code部 ここまでできる!HTML5で追加されたvideoタグが便利すぎる件
http://blog.codecamp.jp/html5_video

まだまだWeb初心者の私ですが、もっと勉強してスキルを身に付けていきます。
これからもWeb制作の仕事をして気付いたことや便利な情報をお届けいたします!
今回はHTML5の「videoタグ」についてでした!