LoginSignup
6
2

More than 3 years have passed since last update.

ChromeのGlobal Media Controlsに情報とコントロールを付ける

Last updated at Posted at 2020-01-10

Chrome 79で最近Global Media Controlsというのが有効化されるようになりました。
割と前から?テストしていたみたいですが、この記事を書いた時くらいから勝手に有効化するようになったみたいです。
Youtubeの動画を再生すると以下見たいな感じに表示されます。

media.png

基本的にはvideoやaudioの様なメディアに反応して出てくるのですが、Youtube以外は再生/停止ボタンしか出ずGoogleだからか?と思いましたが違いました。
スマホでは多分よく使われているMedia Session APIを使うとデスクトップでも情報として取ってくれます。

<html>
<video src='./bbb_buny.mp4' width="720" controls autoplay></video>
<script type="text/javascript">
navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Big Buck Bunny',
    artist: 'https://peach.blender.org/',
    artwork: [
        { src: 'https://sample.com/test.jpg', sizes: '256x256', type: 'image/jpg' },
    ]
})
</script>
</html>

メディアのコントロールを付けたい場合はsetActionHandlerにハンドラを増やして行くと良いです。

以下はvideoに対しての一例です。

navigator.mediaSession.setActionHandler('play', async () => await document.querySelector('video').play())
navigator.mediaSession.setActionHandler('pause', async () => await document.querySelector('video').pause())
navigator.mediaSession.setActionHandler('seekbackward', () => document.querySelector('video').currentTime-=5);
navigator.mediaSession.setActionHandler('seekforward', () => document.querySelector('video').currentTime+=5);

media2.png

これでYoutubeみたいに情報を表示できます。もっと細かく情報やハンドラを付けたい場合は大体モバイルの話ベースですが、
Googleの解説を読みましょう。

私みたいにタブをバカみたいに開く人には良い機能かもしれませんが、邪魔だという人は chrome://flags/#global-media-controls から無効化できるみたいです。

Chrome OSでは前からあったみたいです。最近はスマホのUIなどを最近デスクトップ版にも取り込むような動きなんでしょうか。

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2