概念と使用法
複数のメディア群を表示させる場合、すべてのメディアを単一のファイル内に含め、それぞれの場合で必要な部分のみを表示させる方が、より便利で効率的であることがあります。
メディアフラグメントは、URL フラグメントを介してこのことを行うことができます。仕様では 2 つの異なる種類が定義されています。
- 時間軸フラグメントを使用すると、動画やアニメーションの特定の開始時刻から特定の終了時刻までの部分だけを再生することができ、その後メディアは停止します。
- 空間軸フラグメントを使用すると、表示させるボックスのサイズとボックスの左上角の座標を指定することで、メディアの特定の矩形領域を表示させることができます。
時間軸フラグメントの構文
https://example.com/video.mp4#t=[npt:][timeStart][,timeEnd]
この構文の主要な部分は次の通りです。
t=-
時間軸構文の開始を示します。ハッシュ/ポンド記号の後に常に記述する必要があります。
npt:省略可-
使用される構文形式の名前識別子。
nptは通常再生時間を意味し、デフォルトかつ唯一対応している形式であるため、この部分は省略できます。 timeStart省略可-
メディアの部分の開始時間。
timeEnd省略可-
メディアの部分の終了時間。
timeStart および timeEnd の値は、以下の形式で指定できます。同じフラグメント内でこれらの形式を混在させることも可能です。
seconds-
秒数で値を表す数値。これは
0以上であり、小数点以下の桁数を示すために小数部分を含めることができます。 hh:mm:ss-
時、分、秒の値をコロンで区切ったものです。時の値は
0以上の整数です。分の値は0から59までの整数です。秒の値は0から59までの数値で、秒以下の小数点以下の桁数を記載することができます。 mm:ss-
分と秒の値をコロンで区切った形式。分の値は
0から59までの整数です。秒の値は0から59までの数値で、小数点以下の桁数を示し、分以下の端数を示します。
例えば、以下のフラグメントはすべてメディアを先頭から 5 秒間再生します。
#t=0,5 #t=,5 #t=0:00:00,5 #t=00:00,0:00:05
以下の 2 つのフラグメントは、いずれもメディアの 2 秒目から末尾までを再生します。
#t=2 #t=0:00:02
以下のフラグメントは、メディアの 2 秒目から 3.5 秒目までを再生します。
#t=2,3.5 #t=0:00:02,3.5 #t=0:00:02,00:03.5
空間軸フラグメントの構文
https://example.com/test.svg#xywh=[unit:]xCoord,yCoord,width,height
この構文の主要な部分は次の通りです。
xywh=-
空間軸構文の開始を示します。ハッシュ/ポンド記号の後に常に記述する必要があります。
unit:省略可-
xCoord、yCoord、width、heightで指定する単位です。省略した場合のデフォルトはpixel:です。可能な値は以下の通りです。 xCoord-
表示させるボックスの左上角からメディアの左上角までの水平距離です。
yCoord-
表示させるボックスの左上角からメディアの左上角までの垂直距離です。
width-
表示されるボックスの幅です。
height-
表示されるボックスの高さです。
例えば、以下のフラグメントはいずれも、元のメディアの左端から 160px、上端から 120px の位置に左上角を持つ 320x240 ピクセルのボックスを表示させます。
xywh=160,120,320,240 xywh=pixel:160,120,320,240
次のフラグメントは、元のメディアの左端から 25%、上端から 25% の位置に左上角を持つ 50%x50% のボックスを表示させます。
xywh=percent:25,25,50,50
例
音声と動画ファイルから特定の時間範囲の抜粋を再生
HTML
次の HTML スニペットは、ページに動画と音声スニペットを埋め込み、メディア URL に時間のフラグメントを含めてメディアの再生量を制限しています。
<video controls width="250">
<source src="/shared-assets/videos/flower.mp4#t=2,4" type="video/mp4" />
</video>
<hr />
<audio controls src="/shared-assets/audio/t-rex-roar.mp3#t=,00:01"></audio>
結果
これは次のようにレンダリングされます。
指定されたプレーヤーで動画/音声ファイルを再生し、時間的断片が再生にどう影響するか確認してください。元の動画は 5 秒間ですが、2 秒目から 4 秒目までの部分が再生されます。元の音声は 2 秒間ですが、最初の 1 秒間のみが再生されます。
SVG 画像の部分を表示
HTML
この例では、<img> 要素を使用して SVG 画像をページに埋め込み、同時に同じ画像を <div> 要素の CSS 背景として指定しています。
<img> 要素のソースには空間フラグメント #xywh=100,100,400,400 を指定しており、これにより元画像の左上角から座標 (100,100) の位置に左上角を持つ、400x400 ピクセル分の画像領域を表示させます。width と height を 200 に設定することで、切り出した画像部分が 200x200 ピクセルのサイズで表示されます。
<img
src="/shared-assets/images/examples/firefox-logo.svg#xywh=100,100,400,400"
width="200"
height="200" />
<hr />
<div class="bgtest"></div>
CSS
<div> 要素に CSS の background-image を設定し、同じ SVG 画像を指します。この時点では、空間フラグメントは #xywh=100,100,100,100 となり、画像の一部は 100x100 ピクセルで、その左上角は元の画像の左上角から (100,100) の座標に位置します。 background-size プロパティを 50px 50px に設定しているため、この領域は <div> の背景全体に 50x50 ピクセルのサイズでタイル状に表示されます。
.bgtest {
width: 100%;
height: 200px;
background-image: url("/shared-assets/images/examples/firefox-logo.svg#xywh=100,100,100,100");
background-size: 50px 50px;
}
結果
上記のコードは次のようにレンダリングされます。
仕様書
| Specification |
|---|
| Unknown specification |
ブラウザーの互換性
メディアフラグメントへの対応は、次のコンテキストに限定されます。
- 時間フラグメントは、すべての現行ブラウザーにおいて、音声ファイルおよび動画ファイルの URL （例えば、
<audio>要素や<video>要素で使用されるもの）で機能します。 - 時間フラグメントは、Firefox 147 以上において、SMIL アニメーション を機能させる SVG 画像ファイルでも動作します。
- 空間フラグメントは、Firefox 147 以上で、SVG 画像ファイルに対して動作します。ピクセル値は期待通りに動作しますが、パーセント値は不安定な動作を示すため、使用を避けることを推奨します。