• twitterアイコン
  • facebookアイコン
  • LINEアイコン

【HTML5】videoタグの基本について説明します

YoutubeやInstagramのストーリー、
TikTokや動画広告などなど、

スマートフォンやパソコンの機能の上昇に伴い、

「動画」

が活躍する場面はますます増えていきます。

今回はHTML5のvideoタグをもちいて、
動画をページに簡単に追加する方法をご紹介します。

[toc]

viddeoタグの基本形


これだけでです。

かなり簡単ですよね?

ただ、
動画の再生方法はいろいろあるので、
再生方法を変更できる属性についてもチェックしましょう。

videoタグの属性

属性一覧

属性 説明
autoplay autoplay 自動再生されます
controls controls 再生やポーズなどのボタンが出現します。
height pixels 動画の高さを指定できます
loop loop ループ再生されます
muted muted 無音になります
poster URL 動画をダウンロード中(もしくはできなかった場合)に表示される画像を設定できます
preload auto
metadata
none
動画をどのように読み込むべきかを伝えるための属性です
src URL ファイルへのパスを指定します
width pixels 動画の幅を指定できます

「ループ再生+無音再生」のサンプルコード


無音の動画が繰り返し再生されます。

簡単ですね!

ちょっとつまづくところ

あれ?動画再生されない・・
->拡張子はmp4にしましょう!

*WebM/Oggなどはブラウザによっては対応されていないので注意です!

あれ?Chromeで動画が自動再生されない・・・

->muted属性を付与しましょう!
(Googleさんが動画の不正利用を防ぐために、自動再生に制限をかけました)

さいごに

文章で説明するより動画で説明する方がわかりやすいことってありますよね?

是非ともvideoタグを使って、
ユーザーファーストなホームページを目指してください。

*重すぎるファイルは避けましょうね!