ブログBLOG

Tips

2019.11.18

author:アツミWEBデザイナー

今一度復習したい!html5で追加になった要素 part3

今一度復習したい!html5で追加になった要素 part3

こんにちは。デザイナーのアツミです。

前回、html5から追加になったタグの復習記事part2を書きました。そこではpart1に続いて文書構造に関わるタグの復習をしましたが、続きとして文書構造以外のタグについても書いていきたいと思います。
今回は、「動画や音声、画像に関わるタグ」です。
だんだんと私の知識が浅いところに入ってきましたので、私のようにこのあたりあやふやになっているデザイナーさんたちの、勉強するきっかけになればと思います!(笑)

今回は、「video」「audio」「picture」「source」「track」「embed」についてです。

動画や音声、画像に関わるタグ

video

<video>~</video>で囲まれたところに、動画を埋め込むことができます。(音声コンテンツに対しても使用できるようですが、その場合はaudio要素が適しています。audio要素については後述)この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することができます。

動画ファイルはsrc属性で指定します。
複数の再生候補(形式が違う動画データ)がある場合は、video要素内にsource要素を配置し、そのsrc属性で動画ファイルを指定します。(ブラウザの種類により、再生できる動画形式が異なるようです。なんで揃えてくれないんだ…。)
その他幅や高さ、ループ、自動再生等、属性で色々指定することができます。

また、video要素内にはvideo要素に対応していないブラウザ向けの代替コンテンツも配置することができます。(「動画を再生するにはサポートしたブラウザが必要です。」等を表示することもできる)代替コンテンツはsource要素よりも後に配置する必要があります。

名前の通り動画を埋め込むタグなんだろう、という理解はあったのですが、具体的な使用方法を知らなかったので、ちょっとスッキリです(笑)

audio

<audio>~</audio>で囲まれたところに、音声を埋め込むことができます。この要素に対応しているブラウザでは、プラグインを使わずに音声を再生することができます。

音声ファイルはvideo要素と同様に、src属性で指定します。
複数の再生候補(形式が違う音声データ)がある場合は、audio要素内にsource要素を配置し、そのsrc属性で音声ファイルを指定します。(ブラウザの種類により、再生できる音声形式が異なるようです。って音声もか…)
その他ループや自動再生、ミュート等、属性で色々指定することができます。

また、audio要素内にもvideo要素と同様、対応していないブラウザ向けの代替コンテンツを配置することができます。(「音声を再生するにはサポートしたブラウザが必要です。」等を表示することもできる)代替コンテンツはsource要素よりも後に配置する必要があります。

audio要素はざっと、video要素の音声版のようなかんじですね!

picture

<picture>~</picture>で囲まれたところに、レスポンシブイメージを埋め込むことができます。サイズや内容の異なる複数の画像候補を用意することで、それぞれの閲覧環境に適した画像が表示されるようになります。picture要素はHTML 5.1で追加されたもののようです。

画像候補はsource要素とimg要素で記述します。
ブラウザは複数のsource要素のsrcset属性で指定された画像の中から、最も適切なものを選択します。(source要素には、メディアクエリや表示サイズ等を属性で指定することができます) 適切なものがない場合やブラウザがpicture要素に対応していない場合は、img要素で指定されたものが表示されます。img要素は必須で、source要素の後に記述します。

残念ながらIE11には対応していないようですが、ポリフィルを使用すれば問題なく使用できるとのこと。
しかし、なんでpicture要素内のsource要素だけ「src属性」ではなく「srcset属性」なのでしょう…不思議です(笑)

source

<source>では、それぞれのブラウザに対応した複数のメディアファイルを指定することができ、audio要素、video要素、picture要素の子要素として使用します。
それぞれの要素内での使い方は、既に書いてしまったのでそれぞれでご確認ください(笑)
ちなみに空要素のため、閉じタグは必要ありません。

track

<track>では、動画や音声にテキストトラック(字幕等)を埋め込むことができます。video要素およびaudio要素の子要素として使用し、空要素であるため閉じタグは必要ありません。
video要素およびaudio要素内のsource要素よりも後、かつ代替コンテンツよりも前に配置する必要があります。

テキストトラックファイルも、src属性でファイルを指定します。
ファイルはWebVTT (Web Video Text Tracks)という形式で.vttファイルを作成する必要があるようです。
vttファイルについては検索するとたくさん出てきますのでここでは割愛させていただきますが、そこまで難しいものではなさそうです。字幕部分にcssも指定できるようですね。

(参考)
https://developer.mozilla.org/ja/docs/Web/API/Web_Video_Text_Tracks_Format

その他、翻訳テキストや動画の説明等のトラックの種類、言語の種類など、属性で指定することができます。

動画や音声に字幕を設定することができるタグがあるのは知りませんでした!使う機会は少ないかもしれませんが、覚えておいて損は無さそうです。

embed

<embed>では、プラグインを使用して再生されるコンテンツ(動画や音声など)を埋め込むことができます。
こちらもsrc属性でファイルを指定する形です。
よく利用されるプラグインデータは、 動画だとMPEG(.mpg)、FLASH(.swf)、QuickTime(.mov)等、 音声だとWAVE(.wav)、AIFF(.aif)、AU(.au)、MIDI(.mid)、RealAudio(.ra)等とのこと。
ただ、最近のほとんどのブラウザはプラグインの対応を非推奨にしているため、コンテンツを多くのユーザーに問題なく閲覧してほしいのであれば、embed要素をなるべく使用しないことが良さそうです。

最後に

今回は「動画や音声、画像に関わるタグ」をまとめてご紹介しました。
このあたりは「タグの存在はなんとなく知っていたけど…」というレベルでしたので「知らなかった…便利やん!」と思う点がたくさん出てきて自分が大変勉強になりました(笑)
引き続きまたの機会に、残りのタグについても書くことができれば良いなと思います。

参考サイト

関連記事

RECENT POSTS