Chrome의 Global Media Controls에 정보 및 컨트롤 추가

6138 단어 Chrome자바스크립트MediaSession
Chrome 79에서 최근 Global Media Controls이 활성화되었습니다.
비교적 전부터? 테스트하고 있던 것 같습니다만, 이 기사를 쓸 때 정도부터 마음대로 활성화하게 된 것 같습니다.
Youtube 동영상을 재생하면 아래와 같은 느낌으로 표시됩니다.



기본적으로는 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);



이제 Youtube처럼 정보를 볼 수 있습니다. 좀 더 세세하게 정보나 핸들러를 붙이고 싶은 경우는 대체로 모바일의 이야기 베이스입니다만,
Google 의 해설을 읽어보자.

나처럼 탭을 바보처럼 여는 사람에게는 좋은 기능일지도 모릅니다만, 방해라고 하는 사람은 chrome://flags/#global-media-controls 로부터 무효화할 수 있는 것 같습니다.

Chrome OS에서는 이전부터 있었던 것 같습니다. 최근에는 스마트 폰의 UI 등을 최근 데스크톱 버전에도 도입하는 움직임입니까.
Conhecendo 또는 structuredClone
Javascript에서 Facade 패턴 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage