MediaMetadata: artwork プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

artworkMediaMetaData インターフェイスのプロパティで、再生するメディアに関連付けられた画像を表すオブジェクトの配列を返します。 media.

オブジェクトの配列 (Array) で、それぞれに以下のフィールドがあります。

src

ユーザーエージェントが画像データを取得する URL です。

sizes 省略可

リソースを複数のサイズで指定し、ユーザーエージェントが単一の画像を変倍しなくても済むようにします。既定では空文字列 ("") です。

type 省略可

ユーザーエージェントが対応していない型の画像を無視するためのMIMEタイプのヒントです。ただし、ユーザーエージェントは画像をダウンロードした後、MIME タイプスニッフィングを使用してその型を決定することができます。既定では空文字列 ("") です。

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。

js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}

仕様書

Specification
Media Session
# dom-mediametadata-artwork

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
artwork

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support