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タグを使って、
ユーザーファーストなホームページを目指してください。
＊重すぎるファイルは避けましょうね！