UIT INSIDE

LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • HANATANI Takuma
  • 緑豆はるさめ
2022/04/01 に公開 335 views

このエピソードについて

@spring-raining が、@potato4d にプラウザ上での音声や動画を制御できる MediaSession API について聞いてみました。

MediaSession API とは?

MediaSession API でできること

  • 実は UIT INSIDE でも対応しました
  • Customize media notifications and playback controls outside the browser https://www.youtube.com/watch?v=Ft6diPReUAU
  • 再生している動画・音声のメタ情報を表示できる
    • MediaMetadata が window に生えており、 new することでメタデータの入ったオブジェクトを生成可能
      • タイトル・アーティスト・アートワーク(thumbnail)が設定可能
      • ブラウザのメディア通知と連携することが前提とされているので、音声コンテンツ・動画コンテンツでそれぞれ多少違った情報を表示できる
  • 音声・動画のコントロールが可能
    • ある程度はブラウザ側がメディア通知をよしなに取り扱ってくれるが、完全ではない
      • 基本的にブラウザがやってくれるのは再生・一時停止くらい
      • MediaSession API を使うと、トラックのスキップやシークなどの操作も JS のロジックと共有できる
      • Action Handler は実装状況がまちまちなようなので、使うときはいくつかブラウザを横断してみてもらうと良いかも

こういうときに使えそう

  • 音声や動画を使うサイトだととりあえず対応しておいて損はなさそう
  • シンプルな機能以上のことを使うにはアプリケーションごとのマッチが求められそう

Refs

10秒前へ 10秒次へ