皆さまこんにちは！坂井です(＾o＾)
４月より社会人２年目となる私。
仕事も色々覚えてきて、Webサイトを管理したり、
作成したり日々奮闘中でございます。
最近Webサイトに動画を表示するために、
HTML5のvideoタグを初めて使いました！
これを使うことで簡単にWebサイト上に動画を表示することが出来ます！
とっても便利です(＾o＾三＾o＾)
今回はWebサイトに動画を表示させたいという方、
そして自分用のメモ(笑)としてvideoタグのご説明をいたします。
1.videoタグの使い方
まずは動画を用意しましょう！
今回はMP4の動画を使います。
動画サイズが大きいと表示が重たくなるので注意。
私が使用した時は動画時間が25分～30分と長めでしたが、約200MBにサイズを圧縮して特に重くならず表示ができました。
動画が用意できたらコーディングに入ります。
出ました！videoタグです！
<video controls>
<source src="movie/sample.mp4">
</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サイトデザインのツールとして使うことが出来ます！
まだまだWeb初心者の私ですが、もっと勉強してスキルを身に付けていきます。
これからもWeb制作の仕事をして気付いたことや便利な情報をお届けいたします！
今回はHTML5の「videoタグ」についてでした！
