iOS 에서 동영상 재생이 안되나요?

안녕하세요 찐망고입니다.

아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.

요즘 기업사이트 추세가 메인 비주얼 섹션에 영상을 많이 넣더라구요.

거의 국룰이랄까..

영상을 넣을거다 라고 하면

HTML요소로는 VIDEO요소가 있고

내가 다른 서버에 있는 영상을 좀 가지고 쓸거다 라고 하면  IFRAME요소로도 가능합니다

 

 

// VIDEO요소

<video autoplay muted loop playsinline poster="이미지경로">
	<source src="경로.mp4" type="video/mp4">
</video>

메인에 영상만 넣으면 멈춰있는 상태로 들어가요

그래서 자동재생(autoplay) 하는게 좋은데 자동재생 속성을 넣어도 멈춰있단 말이죠.

사용자입장에서 처음  가보는 페이지에 접속하자마자

시끄러운 소리와 함께 (나름 고르고고른 bgm이라 할지라도) 영상이 재생되면 당황하겠죠?

그래서 음소거(muted)를 하는 거고, 음소거가 되야 자동재생이 됩니다.

한번 재생하고 멈출거 아니면 반복재생(loop)는 필수구여~

playsinline속성은 ios에서 비디오가 재생될때 전체화면으로 나오는걸 방지하는 속성입니다.

poster속성은 혹 영상이 보이지 않을 경우를 대비해서 넣어놓는 이미지입니다.

 

soruce요소를 이용하여 재생할 파일의 경로를 넣어두시면 되는데

각 브라우저마자 모든 코덱이 다 지원되는건 아니니 확인이 필요하겠죠? 

HTML Video Formats

video formats

HTML Video - Media Types

video media type

자 그럼 ios에서 비디오영상이 재생되나 하고 체크해보는데..

어라 안돌아가요.. 멈춰있어요 경로도문제없고 오타도 없는데 하고 보니..

cjfreshway모바일사이트

 

저 배터리 부분에 주황색이 보이시죠~? ios의 저전력모드

저전력모드는 아이폰에서 인위적으로 폰의 성능을 떨어트려 배터리의 사용시간을 늘리는 것인데요.

저전력모드가 실행되면 저렇게 영상이 돌아가는 모바일 사이트들도 재생이 멈춰버려요.

아무래도 해결할 방법이 없다보니 저런식으로 저전력모드일때의 재생버튼을 따로 만들기도 합니다.

사용자가 직접 재생버튼을 누르면 재생할 수 있게요 

 

JS코드는 아래 두 요소를 추가로 넣어주면 됩니다.

const video = document.querySelector('video');
video.addEventListener('suspend', () => {
  // 저전력 모드일때 진입했을때 작업 화면
});

video.addEventListener('play', () => {
  // 사용자가 수동으로 비디오를 Play할때의 작업 화면
});

지금 저 cjfreshway사이트도 모바일 저전력 모드에선 재생버튼을 누르게 셋팅이 되어있죠?

저걸 누르면 바로 재생이 됩니다.

 

 

 

 

suspend이벤트

const video = document.querySelector("video");

video.addEventListener("suspend", (event) => {
  console.log("Data loading has been suspended.");
});

const video = document.querySelector("video");

video.onsuspend = (event) => {
  console.log("Data loading has been suspended.");
};

- 브라우저가 의도적으로 미디어 데이터를 안 가져올때 이벤트 발생

- 이벤트 자체를 취소할 수 없다.

 

 

 

출처 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event

HTMLMediaElement: suspend event - Web APIs | MDN