<video>とは
<video>タグとはホームページに直接動画を埋め込むことが出来るタグです。
基本この<video>タグを使うときには、掲載したい動画をサーバーに直接アップロードしてからになります。Wordpressなどを使っている場合は画像をアップロードするみたいな感じで動画をアップロードして埋め込むことも可能ですが、大体データの容量が重いとかでそもそも素材としてアップロードが出来ないパターンが多いと思います。
サーバーにアップロードが出来ないよ～とか容量が気になるからちょっとな～みたいな方はyoutubeなどの動画サイトを経由してHPに埋め込むことになるかと思いますが、その場合使用するタグは<iframe>タグになります。<iframe>に関してはまた後述します。また、音声のみのデータも<video>タグを使って埋め込むことが出来ますが、その場合は<audio>タグを使うほうが適切だと思います。
<source>タグとは
<source>タグは使える場所が限られています。使えるのは親要素に<picture>もしくは<video>、<audio>タグが指定されているときのみです。
親が<video>や<audio>の場合
ここでは例として<video>タグを使うときのお話をします。
上でお話しした通り<video>タグは動画を直接HPに埋め込むタグになっていますが、ブラウザによってはその動画の形式を扱っていなかったり相性が悪かったりする可能性もあります。そんな時の対策としていろいろな形式を持った同じ動画を作っておき、それを複数指定することで動画が表示されませんでした～という事態を防ぐことが出来るタグになっています。（HP側が適した形式の動画を選んで実行してくれる）
親が<picture>の場合
親が<picture>の場合、レスポンシブデザインに対応させることも可能です。レスポンシブデザインってなんぞ？って人はこちらの記事を参照してください。
詳しい内容・使い方に関しては後述する<picture>の項目でご確認ください。
<video>・<source>タグの使い方・注意点
<video>タグ・<source>タグの使い方をご説明します。属性によっていきなり再生したり指定したところから再生したり、再生と同時に強制的に動画を全画面表示にしたりなど様々な表示の仕方をすることが可能です。
また、<video>タグや<audio>タグの中には<track>タグを入れ子として入れることが可能ですが、<source>タグを入れる際はこの<track>タグよりも前に（上に）置くようにしましょう。（先に<source>の方を読ませる）
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>まず<video>タグで<source>タグを囲っています。<source>タグというのは↑でも説明した通り、相性によって動画や画像が表示されないなどの問題を防ぐために複数の形式を用意しておくためのタグです。
見て頂いたらわかる通り、webm形式とmp4形式を用意しています。ただ今現在はほとんどのブラウザや機種でmp4形式をカバーしているそうなので、基本的にmp4形式のものを用意しておけばよさそうです。このソースでは、flowerという名前の動画を幅250pxで表示させますよ～と指定しています。
また、<video>タグは<source>タグを使わなくても動画を埋め込むことが可能です。<video>タグ内にsrc属性を付与することによって、直接動画のありかを指定することが出来ます。↓
<video src="ここで動画ファイルのありかを指定" controls></video>ただ、このようにした場合ブラウザによって動画ファイルが対応していなかったら何も表示されないという事態になるので、<source>で素材を複数用意するか、表示されなかった時用に画像を一枚用意しておくなどしておくほうが良いかも知れません。
<video>タグの間にこんな感じで書いておくと、動画が表示されなかったときに「表示されなくてごめんね」が表示されます。（悲しい）
<video src=”ここで動画ファイルのありかを指定” controls>表示されなくてごめんね</video>
一応↓に<source>タグの書式も書いておきます。
<source src="ここで動画ファイルのありかを指定" type="動画の形式を指定">controlsは必ず書くようにしましょう。その機能の詳細は↓の<video>タグの属性で解説しています。
<video>タグの属性
src | 動画ファイルのありかを指定（絶対パス・相対パス） |
crossorigin | CORS リクエストの構成を有効する。 CORS（Cross-Origin Resource Sharing）とは、違うオリジンからのアクセスを許可する仕組みのこと。 オリジンとは、スキーム、ホスト、ポートの組み合わせのこと。 ・スキームはhttpやhttpsのこと ・ホストはドメインのこと（例→111111monji.com） ・ポートは（ipアドレスが住所なら）通信の際に使用する部屋番号のようなもの。 普通悪意のあるサイトが別のサイトから機密データを読み取れないようにするため他のオリジンからはアクセスを許さないようにしているが、このリクエストを送ることによって他のオリジンからのアクセスを許すことになる。 |
poster | 動画のサムネイルを設定する ・ブラウザのバージョンが古く動画がサポートされていない（表示されない）際に代わりに表示する画像のありかを指定する ・動画の読み込みの際にこれを指定しなかったら動画の存在に気づかれない可能性もあるのでそれを予防するために仮においておく画像のありかを指定する 例）<video poster=”images/samune.webp”></video> これは設定しておいた方が親切かも？ |
preload | 動画をページに表示させる際の動きを指定する。映像を事前に読み込むと、その読み込む時間がかかるので基本的にはnoneにしておくとよい。 ・none:映像を事前に読み込まない（再生ボタンを押されたときに読み込む） ・metadata:映像のメタデータを読み込む ・auto:ファイル全体のダウンロードを許可する |
autoplay | ページがロードされたときに動画を自動的に再生する。 動画の読み込みを強制的に行うので表示されるスピードが遅くなる。 （見る側には結構なストレスになるのでこの機能を使うときは慎重に） ※safariなど一部のブラウザでは下にあるmuted（音を消す設定）をしていないと自動再生がされないこともありますので、autoplayを設定する場合はmutedも同時に指定しましょう。 |
playsinline | 動画ファイルが埋め込まれてホームページ上に表示されているそのサイズ感（インライン）のまま動画ファイルを再生する。一部のスマートフォンではこの属性が指定されていない動画を再生すると自動的に全画面モードになることもあるためそれを防ぎたいのであればこの属性を設定しておく。 元々そのサイズ感のまま再生の設定がされているブラウザに関してはスルーされる。 |
loop | 動画をループさせるかどうか |
muted | 動画をデフォルトでミュートするかどうか |
controls※必須 | 動画を見たときにセットで表示されている再生ボタンや音量ボタン、シーク、ポーズなどの各機能を制御するためのツール・コントロールを表示させる。 これを書かないでおくと再生ボタンも無いし音量も変えられない…みたいな事態になるので、これは必須だと思っておきましょう。 |
width | 幅の値（%表記は×、pxのみ） |
height | 高さの値（%表記は×、pxのみ） |
<video>にcontrolsを設定しているのにボタンが押せない
<video>タグにcontrolsを設定していて、再生ボタンなどが表示されているにも関わらずボタンの操作が効かない（ボタンが押せない）場合がありました。
私の場合は動画の重なり順が悪さをしていたらしく、<video>タグを置いていた<div>自体が他の要素<他のdiv>よりも後ろ側z-indexを指定していたことによって動作が上手くいかなくなっていたようです。
なので動画の重なり順には気を付けてください。動画自体を前に持ってきたとしても、その動画自体が所属している団体<div>が後ろに存在したりすると動画自体も後ろに下がっちゃってボタンが押せなくなります。
<source>タグの属性
| type | 埋め込みリソースのタイプ |
| media | ブラウザ幅に応じた条件を設定することが可能（レスポンシブデザイン） ipadよりも小型の端末（スマホなど）で見た際の画像を指定したい↓ <picture> <source srcset=”素材のありか” media=”(max-width: 767px)” /> <img src=”素材のありか” alt=”” /> </picture> |
| src | リソースのアドレス (audio/videoが親の時) |
| srcset | 高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像(pictureが親の時) |
| sizes | さまざまなページ レイアウトの画像サイズ(pictureが親の時) |
| width | 幅(pictureが親の時) |
| height | 高さ(pictureが親の時) |
<audio>タグとは
<audio>タグとは音声のみのデータを直接ホームページに埋め込む際に使用するタグです。属性を付与することによって自動再生をさせたりループさせたりすることが可能です。
<audio>タグの使い方
<audio>タグも<video>タグ同様に<audio>タグ内にデータのありかを指定して再生させるパターンと、<source>タグで複数データの形式を指定するパターンがあります。
下のパターンではもしも<audio>タグに対応してないブラウザーで音声のデータが表示されたときに代替として表示されるものです。（<a>タグならどのブラウザにでも対応できるので）
<audio controls src="音声データのありかの指定">
<a href="audioタグがサポートされておらず再生できなかった時の予備音声素材のURL">オーディオ</a>
</audio><audio>タグの属性に関してはほとんど<video>と一緒になります。
<track>タグとは・注意点
<track>タグとは、動画に字幕を付けるためのタグになります。とは言ってもこのタグで字幕を付けるのではなく、拡張子がvttのWebVTTファイルを別に用意する必要があります。WebVTTファイルはテキストファイルなので、テキストエディタ（ここでは私が過去に使っていたterapadというテキストエディタをリンクしています）で、保存形式をVTTにして保存すると良いです。
また、<track>タグを使える条件というのが<audio><video>タグの中の子要素としてのみとなります。もしも<source>タグを同じ親の<audio><video>タグに設定している場合は、必ずその下に配置するようにしましょう。
<track>タグの属性
| kind | トラックのタイプを定める。デフォ値はsubtitles。subtitlesを設定していたらsrclangを設定する必要あり・subtitles → 解読不可能な言語に対するもの。英会話教室の動画の日本語訳とか・captions → 耳が不自由なユーザーなどに対するもの |
| src | テキスト素材のありかを示す |
| srclang | テキストトラックの言語。kindが初期値のまま、もしくはsubtitlesを設定していたらこの属性も設定する必要あり。 例えば日本語ならsrclang=”ja”だし、英語ならsrclang=”en” |
| label | ユーザーに表示されるラベル、キャプションとか |
| default | 別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表す |
<track>タグの使い方
<track>タグの使い方ですが、基本的にはこんな感じになると思います。↓
<video controls src="/media/cc0-videos/friday.mp4">
<track default kind="captions" srclang="en" src="/media/examples/friday.vtt" />
<a href="/media/examples/friday.vtt">subtitles</a>.
</video><track default>で、他にも複数のデータがあるときにデフォのデータとして設定しています。kind属性に関しては上の記事を参照してください。
<picture>タグとは
<picture>タグとは、0 個以上の<source>タグと１つ以上の<img>タグを子に持つタグになります。用途は主に２つあります。
- ブラウザなどによってサポートされていない形式があるときに複数用意しておける
- レスポンシブデザインに対応できる
ひとつは<source>タグと同じようなもので、ブラウザや端末によって表示されない画像形式などがあった際に複数の形式を備えておくことによって何も表示されない…みたいな状態にならないようにするためのものであるのと、もうひとつはスマホなどの端末で画像を表示させるときにデカすぎるから小さくしたい…（端末などによって見え方を変える＝レスポンシブデザイン）みたいなときです。
レスポンシブデザインについて詳しく知りたいぞという方はこちらの記事を見てください。
<picture>タグの使い方
<picture>タグを使うときは、0 個以上の<source>タグと１つ以上の<img>タグを置きます。↓
<picture>
<source srcset="画像のありか" media="表示させたい端末のサイズとか" />
<img src="画像のありか、画像の形式まで書く" alt="" />
</picture>ソースコードは上から順に読まれていきます。よって一番上のソースに、スマホの時に表示する画像。そして次の行にipadで表示させる画像…みたいに命令文を並べて各端末に対応させることも可能です。
もしも該当する大きさではなかった場合下にあるソースコードを読むことになります。なので画像がいくつも表示されるなんてことはなく、むしろ適当な画像を判断して表示してくれます。
仮にサイズが大きい順から行くとすれば、こんな感じの記述になると思います。
<picture>
<source srcset="PCでの表示…素材のありか" media="(min-width: 1000px)"/>
<source srcset="タブレットでの表示…素材のありか" media="(min-width: 650px)"/>
<img src="タブレットよりも小さい端末での表示…素材のありか" alt=""/>
</picture>min-widthやmax-widthに関してはこう！という標準的な値はないので、デザイン崩れするな～という境目くらいから小さくしたり大きくしたり調整します。
<iframe>タグとは
<iframe>タグの使い道は大きく分けて２つあります。
- HTMLファイルの中に別のHTMLファイルを組み込みたいときに使用
- youtubeやtwitter（現X）を埋め込む（そのページ内で開けるので、別リンクが開かずに便利）
例えばですが、HTMLのファイルの中に別のページのファイルを組み込みたいときには<iframe>を使います。そのほかに、Googleマップを埋め込んだり、youtubeの動画を埋め込んだりが多いです。
youtubeの埋め込みの場合、埋め込まれ元（？）とデータのやり取りをして再生回数を反映させたりするようです。ちなみにyoutubeの埋め込みの為のコードはこんな感じ↓
<iframe width="560" height="315" src="https://www.youtube.com/embed/T46j__MuGsk?si=vlZmTqzrdHq2xo5o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>実際に埋め込まれたらこう見えます↓
<iframe>タグの属性
loadingに関してはページによって設定を考える必要あるかも。
<iframe>タグの使い方
実際にGoogleマップで東京のスカイツリーの場所を検索してみました。そこで埋め込みという項目があったのでコピペしたコードがこちらです↓
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6560085991096!2d139.80860392546953!3d35.71008177257792!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1703811404241!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>このように、天下のGoogle様もグーグルマップの埋め込みには<iframe>タグを使用されていました。src=””の中に飛ばしたい先のURLを指定し、widthとheightで高さと幅を指定しています。styleでは枠を消していますし、loading=”lazy”で近くまでスクロールしないと表示されない設定になっています。リファラーもなしになっています。（安心ですね～）
<object>タグ・<embed>タグとは
<object>タグ・<embed>タグとは、ページ内に音声や動画などのデータを埋め込むためのタグとなっています。<object>も<embed>も機能的には同じように見えますが、<embed>タグには終了タグが存在しないため、もしもファイルが見つからなかった時やブラウザがこのタグに対応していなかった時に代替えとなるものを指定することが出来ません。
その点<object>タグは終了タグを付けなければならないため代替えとなるものを<object></object>この間に挟むことが可能です。
その為、もしもそのページ内に音声や動画を埋め込みたいときには<object>タグの方を優先して使用した方がよさそうです。
<object>タグ・<embed>タグの属性
| <object>の属性値 | 意味 | <embed>の属性値 | 意味 |
| data | 外部リソースのアドレス この値かtype↓の値のどちらかは必ず設定する必要あり。 | src | リソースのアドレス |
| type | 埋め込みリソースのタイプ。MIMEを指定する。 この値かdataの値のどちらかは必ず設定する必要あり。 | type | 埋め込みリソースのタイプ MIMEを指定する |
| name | <object>の名前 | width | 幅 |
| form | form要素とこの<object>要素に関連付けます | height | 高さ |
| width | 幅 | なし | なし |
| height | 高さ | なし | なし |
<object>タグの属性には、data属性もしくはtype属性のどちらかを必ず指定する必要があります。dataはその画像や音声などの在り処を示すだけなので、もし分かるのであればdataを指定した方が早いかもしれません（MIMEタイプいっぱいあるし分かりにくいので…。）
<object>タグ・<embed>タグの使い方
<object>の使い方ですが、一つ注意点としてdata属性とtype属性のどちらかを必ず指定しなければなりません。また<object>は対応していないブラウザに対し「対応していません」と表示させることが出来るので、<object>と</object>で囲む形でこのように書きましょう↓
<object data="素材の場所/素材の名前" width="幅" height="高さ">
<p>object要素がサポートされておりません。</p>
<p><a href="素材の在り処">ここ</a>からダウンロードしてください。</p>
</object><embed>の使い方は簡単です。↓
<embed src="素材の場所/素材の名前" autostart="false" width="幅" height="高さ">しかし基本的には<object>の方を使うようにした方が良さそうです。
