rch850 の上澄み

技術的な話題とか、雑談とか。タイトルを上澄みに変えました @ 2020/09/02

Media Fragments のなんちゃってデモ

概要

派手な次世代 Web 標準よりも、あまり見向きされてないやつに魅力を感じてしまうりちゃです。今日は Media Fragments URI 1.0 を紹介します。

この仕様は、文字通り、メディアの一部分を表す URI を策定しようというものです。メディアを具体的に言うと、画像や音声や動画のことです。「一部分」を具体的に言うと画像や動画なら空間上での一部分、音声や動画なら時系列上での一部分のことです。例えばこんな感じ。

  • 集合写真中の自分の顔だけ syashin.jpg#xywh=200,300,100,100
  • 映像中の自分の出演シーンだけ recorded.ogv#t=10,20

こう見るとシンプルですが、使い方によってはいろいろなことができそうだなぁと感じさせてくれる技術です。

good bye CSS Sprites

新しいことがいろいろできそうな Media Fragments ですが、あえて既存技術の置き換えを取り上げます。CSS Sprites というテクニックがありますが、これは今ある仕様(background-position プロパティなど)を何とか使いまわして、トラフィック軽減、表示高速化を図ろうというものでした。あくまでハックですね。これを根本から解決するのが Media Fragments だと考えています。

そして、デモ

というわけで、画像の一部を切り出すデモをやっつけで実装してみました。img タグの src で Media Fragments を使って、それを JavaScript で処理しています。どうも画像のキャッシュがうまく働いていないようなのですが、そこはご愛嬌。どういうことができそうなのかイメージしてもらえれば十分だと思ってます。

細かい点

このデモや CSS Sprites の置き換えについては、Media Fragments のほんの一部です。ここまでは URI の fragment 部分、つまり # 以降を使った書き方しか説明しませんでしたが、URI query、つまり ? 以降を使って指定する方法もあります。この場合、サーバが働くことになります。
また、Media Fragments の解釈方法は様々です。動画の一部を示す場合、とりあえずの再生開始と終了は指定区間でいいと思いますが、再生が終わったら指定された区間以外が見たくなるかもしれません。また画像の場合であっても、特定の場所を切り出すより、その場所だけを明るくして目立たせるような表示方法が好まれるかもしれません。

とまぁいろいろありますが、Media Fragments の今後に注目です……ってあれ?予定では2011年1月には勧告!?うーん、どうなることやら。