WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Explore media formats for the web

Explore media formats for the web

SafariWebMedia
元の動画を見る

ハイライト

Safari 17 は JPEG XL、AVIF、HEIC の 3 つのモダン画像形式を新たにサポートし、Managed Media Source API を導入することで、iPhone 上の Web 動画ストリーミングが 5G を使いながら大幅に省電力化されます。

主要内容

画像形式の課題

Web の画像は何十年も古い形式に依存してきました。GIF は 36 年前に誕生し 8 ビット色のみ、巨大なアニメファイルになります。JPEG は 30 年以上、写真向きですが圧縮で画質が落ちます。PNG は透過をサポートしますが JPEG より圧縮率が低いです。すべてのブラウザがサポートしますが、技術は古くなっています。

Safari 17 は 4 つのモダン画像形式を追加し、用途に応じて選べます:

  • WebP：Safari 14 からサポート、従来形式より小さく、アニメ品質は動画に近い
  • JPEG XL：新規追加、既存 JPEG からの可逆変換で最大 60% サイズ削減
  • AVIF：AV1 動画エンコード使用例、JPEG 比最大 10 倍小さく、モダン形式で最も広いブラウザサポート
  • HEIC：iPhone/iPad 撮影のデフォルト形式、WKWebView でハードウェア加速レンダリング

（02:56）

ブラウザに形式選択を任せる

コードでブラウザ種別を判定する必要はありません。HTML の picture 要素で複数ソースを列挙し、ブラウザが上から最初にサポートする形式を選びます。

<picture>
  <source srcset="image.heic" type="image/heic">
  <source srcset="image.jxl" type="image/jxl">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="説明">
</picture>

キーポイント:

  • picture 内の source は順にマッチ
  • HEIC → JPEG XL → AVIF の順で試行
  • いずれも非対応なら img の JPEG にフォールバック
  • User-Agent 文字列の解析は不要

（06:59）

動画ストリーミングの消費電力問題

Media Source Extensions（MSE）は 2013 年に W3C が公開し、Web ページが動画バッファと解像度切り替えを制御できます。しかし Web ページに制御を渡しすぎ、ブラウザがリクエストタイミングと消費電力を最適化できません。iPhone ではバッテリー寿命低下が確認され、MSE は有効化されませんでした。

（11:05）

Managed Media Source API

Safari 17 の Managed Media Source はバッファ制御をブラウザに返します。ブラウザがダウンロードタイミングを決定し、セルラーモデムを低消費電力状態に長く保てます。

移行は簡単です:

const MediaSource = window.ManagedMediaSource || window.MediaSource;

const video = document.createElement('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('startstreaming', () => {
  fetchAndAppendNextSegment();
});

mediaSource.addEventListener('endstreaming', () => {
  // 取得停止、低消費電力モードへ
});

sourceBuffer.addEventListener('bufferedchange', (event) => {
  console.log('Removed ranges:', event.removedRanges);
});

キーポイント:

  • ManagedMediaSource は Safari 17 の macOS/iPadOS でデフォルト利用可能、iPhone は実験フラグ後
  • startstreaming でデータ取得開始タイミングを通知
  • endstreaming で取得停止し低消費電力へ
  • bufferedchange でバッファ内容クリアを処理
  • これらのイベントに従えば iPhone/iPad で 5G 高速ネットワークを利用可能

（14:49）

AirPlay サポート

MSE 動画は送信可能な URL が必要なため AirPlay 不可。video 要素に HLS ソースをフォールバックとして追加:

<video id="my-video" controls>
  <source src="my-video.m3u8" type="application/vnd.apple.mpegurl">
</video>

AirPlay タップ時、Safari は Managed Media Source から HLS ストリームへ自動切り替え。AirPlay 非対応なら disableRemotePlayback() を呼び出します。

（18:01）

詳細

モダン画像形式の選択戦略

JPEG XL、AVIF、HEIC はすべて広色域と HDR をサポート。広色域はより多くの色情報を、HDR はより暗い黒と明るい白を定義し、屋外風景や高コントラスト、複雑な肌色をより良く表現します。

選択の目安:

  • AVIF を第一フォールバック（モダン形式で最も広いサポート）
  • JPEG XL はプログレッシブ読み込みと既存 JPEG からの可逆変換向け
  • HEIC は WKWebView 内で iPhone アップロード写真を直接処理

（05:53）

HLS.js で動画処理を簡素化

Managed Media Source の詳細を自前処理したくない場合は HLS.js を使用例:

const video = document.getElementById('my-video');

if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = 'my-video.m3u8';
} else if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('my-video.m3u8');
  hls.attachMedia(video);
}

キーポイント:

  • HLS.js は Safari 17 で自動的に Managed Media Source を使用例
  • 非 Safari ブラウザでも HLS 再生可能
  • 数行でほとんどのブラウザをカバー

（19:03）

重要ポイント

  • やること：サイト画像に AVIF と JPEG XL 形式サポートを追加

    • 価値：AVIF は JPEG 比最大 10 倍小さく、JPEG XL は既存 JPEG から可逆変換で 60% 削減
    • 始め方：picture 要素で複数 source を列挙しブラウザに自動選択させる

  • やること：動画再生サイトを Managed Media Source に移行

    • 価値：iPhone で初めて MSE 相当機能が利用可能、5G ダウンロードが速く消費電力も低い
    • 始め方：new MediaSource() を new ManagedMediaSource() に置換、startstreaming/endstreaming リスナーを追加

  • やること：動画に AirPlay サポートを追加

    • 価値：スマホから TV へのキャストをユーザーは期待、MSE 動画は従来非対応
    • 始め方：video 内に HLS プレイリストを指す source 子要素を追加

  • やること：WKWebView アプリで HEIC 画像を直接使用例

    • 価値：iPhone 撮影は HEIC がデフォルト、変換不要でハードウェア加速表示
    • 始め方：HEIC ファイルを画像ソースに直接使用例、Safari 17 の WKWebView がネイティブサポート

関連セッション

コメント

GitHub Issues · utterances