Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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などを最近デスクトップ版にも取り込むような動きなんでしょうか。

clacking
click clack keyboard
https://clacking.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away