navigator.mediaSession

🧸 navigator.mediaSession

navigator.mediaSession는 웹에서 현재 재생중인 오디오,비디오의 정보 및 컨트로를 가능하게 해주는 Web API 이다.

 

🛀🏼 navigator.mediaSession 적용

if ("mediaSession" in navigator) {
	navigator.mediaSession.metadata = new MediaMetadata({
        title: "Podcast Episode Title",
        artist: "Podcast Host",
        album: "Podcast Name",
        artwork: [{ src: "https://www.aplayz.co.kr/media/images/ev_main_con01_logo.png" }],
    });
}

📫 문제를 겪었던 상황

ios/safari에서 노래가 시작되고 잠금화면에서 미디어정보가 뜨지 않는 현상이 발생하였다. 아래 사진처럼 음원은 진행중이나, 정보표시가 뜨지 않는다...

잠금화면에서 노래정보가 나오지 않음

 

음원이 실행중

📩 동작확인 결과

확인해본 결과 ios/safari에서는 play => pause => play 해야 화면에 뜨는 것을 확인하였다.

📮 해결방법

Play 버튼을 누르고 video.play() 실행 => video.pause() => 0.5~1초후 video play() 를 적용하도록 하였다.

const playBtn = () => {
        video.play().then(() => {
            video.muted = false;
            video.pause();

            setTimeout(() => {
             video.play();
            }, 500)
        })
}

결과 아래 사진처럼 뜨는 것을 확인하였다.

play