HTML・CSS:動画を埋め込むvideoタグ、音声を埋め込むaudioタグ、動画に字幕を付けるtrackタグ、様々な画面や端末の条件に応じた画像を提供するpictureタグ、メディアまたは画像のソース要素を複数用意できるsourceタグ、ページ内にインラインのフレームを作るiframeタグ、文書内に音声や動画などのデータを埋め込むためのobjectタグ、embedタグ

<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動画ファイルのありかを指定(絶対パス・相対パス)
crossoriginCORS リクエストの構成を有効する。
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 → 耳が不自由なユーザーなどに対するもの
descriptions → テキストによる動画コンテンツの説明、目が不自由なユーザーなどに対するもの
chapters → ユーザーが操作をする際のもの、チャプター
metadata → スクリプトが判断する情報。見てる人には見えない
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>タグと1つ以上の<img>タグを子に持つタグになります。用途は主に2つあります。

  • ブラウザなどによってサポートされていない形式があるときに複数用意しておける
  • レスポンシブデザインに対応できる

ひとつは<source>タグと同じようなもので、ブラウザや端末によって表示されない画像形式などがあった際に複数の形式を備えておくことによって何も表示されない…みたいな状態にならないようにするためのものであるのと、もうひとつはスマホなどの端末で画像を表示させるときにデカすぎるから小さくしたい…(端末などによって見え方を変える=レスポンシブデザイン)みたいなときです。

レスポンシブデザインについて詳しく知りたいぞという方はこちらの記事を見てください。

<picture>タグの使い方

<picture>タグを使うときは、0 個以上の<source>タグと1つ以上の<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>タグの使い道は大きく分けて2つあります。

  • 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に関してはページによって設定を考える必要あるかも。

src埋め込みたいページのURLを指定
srcdoc埋め込みたいHTMLをそのまま記述
name<iframe>タグ自体の名前
sandboxコンテンツのセキュリティ・ルールについて定める
allow-downloads ユーザーによる操作のないダウンロードを許可
allow-forms 埋め込まれたページからのフォーム送信を有効にする。
allow-modals 埋め込まれたページからモーダルウィンドウを開くことを可能にする。
可能にするだけなので実際はjavascriptなどを使用して表示させる
モーダルウィンドウ=ワイプのデカい版みたいなやつ。それが表示されると背後の操作はできない。
allow-orientation-lock 埋め込まれたページの画面の向きのロックを許可
allow-pointer-lock 埋め込まれたページがPointer Lock API を使用可能にする。
Pointer Lock API=マウスのカーソルの可動域を自在にコントロールする。ゲームしている時にゲーム外にカーソルがはみ出しても操作を続行することが出来るような機能
API=アプリケーション プログラミング インタフェース(機器をつなぐ接続部分や接触する箇所のこと)
allow-popups 埋め込まれたページからのポップアップ・ウィンドウの表示を許可
allow-popups-to-escape-sandbox 埋め込まれたページに移動したときにsandboxが継承されない
allow-presentation プレゼンテーションセッションを開始可能にする。研究結果を発表するなど
allow-same-origin 埋め込まれたページではなく親ページと同じポリシーを適用する
allow-scripts 埋め込まれたページからのスクリプト(ポップアップを除く)の実行を許可
allow-top-navigation 埋め込まれたページからのリンク移動を許可。
allow-top-navigation-by-user-activation 埋め込まれたページが一番上のタブに移動(ユーザーの操作によって開始されたものに限る)
allow-top-navigation-to-custom-protocols カスタムプロトコルを外部のソフトウェアで開けるようにする
カスタムプロトコル=コンピュータとコンピュータがネットワークを通じて通信する際に決められた約束事…をカスタムしたもの
allowコンテンツに適用される権限ポリシー
allowfullscreenコンテンツの使用を許可するかどうか
width
height高さ
referrerpolicyリンク先のURLに飛ぶ際に送るリファラーの情報を定める。指定できるのは↓
"no-referrer", "no-referrer-when-downgrade", "same-origin", "origin", "strict-origin", "origin-when-cross-origin", "strict-origin-when-cross-origin", "unsafe-url"
リファラー →”https://111111monji.com/?p=3586&preview=true#toc3″ こういうやつで、idとかpassとかも下手したら入るので、セキュリティ的な面で制限をかけたりする
loading読み込みの延期を決定するときに使用
lazy(ページの半分以下のところに設置するならこちらの設定がおすすめ)
近くまでスクロールしないと表示されない。
※初めてページに訪れた人や、ページの上の方にある画像や埋め込みに対してこの設定はしないほうが良い。
が、この設定にすることによってページの表示速度が上がるし、最後までページがスクロールされるかもわからないので、パケット通信料も節約できる。

・eager(デフォ値)
近くまでスクロールしてもしなくても表示はされる。

<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
formform要素とこの<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>の使い方は簡単です。↓

タイトルとURLをコピーしました