お仕事のご依頼や採用についてなど、お気軽にお問い合わせください。皆さまこんにちは!坂井です(^o^)4月より社会人2年目となる私。作成したり日々奮闘中でございます。最近Webサイトに動画を表示するために、HTML5のvideoタグを初めて使いました!これを使うことで簡単にWebサイト上に動画を表示することが出来ます!とっても便利です(^o^三^o^)今回はWebサイトに動画を表示させたいという方、そして自分用のメモ(笑)としてvideoタグのご説明をいたします。【目次】1.videoタグの使い方2.videoタグの属性3.使用するときの注意点4.まとめ1.videoタグの使い方まずは動画を用意しましょう!今回はMP4の動画を使います。動画サイズが大きいと表示が重たくなるので注意。私が使用した時は動画時間が25分~30分と長めでしたが、約200MBにサイズを圧縮して特に重くならず表示ができました。動画が用意できたらコーディングに入ります。src="movie/sample.mp4"></video>サンプルを見る動画が表示されましたでしょうか?動画ファイルのURLの指定はvideoタグ内のsourceタグを使用します。src="movie/sample.mp4"></video>サンプルを見る3.使用する時の注意点videoタグを使用してPCでページを見て動画の表示が確認できました。よし、スマートフォンでも見てみよう!再生ボタンポチー...動画が表示されない...PCでは再生されたのにスマートフォンでは再生できない。私は作業中にこのような不具合に出会いました。スマートフォンだけなのだろう...動画が再生されない...しょんぼりしていた私ですが原因を調査したところ、簡単に判明しました。それは...ページにベーシック認証がかかっていた...ベーシック認証とは?Webページにユーザ名・パスワードをかけて閲覧する人を制限させるものスマートフォンの機種によっては、ベーシック認証をかけているページの動画は表示できないということが起きます。一時的にベーシック認証を外してもう一回スマートフォンで見ると動画が表示されました!これで一安心!4.まとめ初めてvideoタグを使用しましたが、こんなに簡単に動画を表示できるとは思いませんでした。ここまでできる!HTML5で追加されたvideoタグが便利すぎる件http://blog.codecamp.jp/html5_videoまだまだWeb初心者の私ですが、もっと勉強してスキルを身に付けていきます。USお仕事のご依頼や採用についてなど、お気軽にお問い合わせください。