아이폰에서 비디오 전체화면으로 넘어가는 이슈

요새 사이트 메인페이지에 동영상으로 gif처럼 넣고 싶은데, pc버전에서는 문제 없이 나오는데 모바일에서 열어보니 몇가지 문제점이 있었다. 

 

먼저 구동하고 싶었던 모습은

- 페이지 오픈시 자동재생

- gif처럼 플레이어 안보이게 재생 

 

우선 아이폰에서는 자체 동영상 플레이어로 넘어가는 현상을 보였다. 

그걸 방지할 수 있는 코드

 <video playsinline>

인라인으로(플레이어로 이동 또는 전체화면 모드로 넘어가지 않고) 재생이 된다. 

video 태그 안에 'playinline' 넣어주면 끝( autoplay / loop / muted를 함께 써주면 자동재생되면서 전체화면으로 넘어가지 않음)

--------------------------

 

또는 동영상 재생이 문제가 있을 때 쓸 수 있는 방법

(동영상 대신 그때만 gif로 변경해주는 방법이다 )

 

HTML

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

 -video 태그 자식에 img 태그로 gif를 넣어준다. 

 

JS

function fallback(video)
{
  var img = video.querySelector('img');
  if (img)
    video.parentNode.replaceChild(img, video);
}

동영상재생의 문제가 있을 경우 gif를 실행시켜준다. 

 

-------------------------------------

 

또는 플레이어로 넘어가 전체화면 플레이어가 될때 gif로 대체해주는 방법

 

HTML

<div id="either-gif-or-video">
  <video src="image.mp4" autoplay loop muted playsinline></video>
  <img src="image.gif">
</div>

CSS

#either-gif-or-video video { display: none; }
@media (-webkit-video-playable-inline) {
    #either-gif-or-video img { display: none; }
    #either-gif-or-video video { display: initial; }
}

css를 이용해 inline으로 재생이 가능할경우만 비디오를 보여준다. 

 

 

(참고 출처 : https://webkit.org/blog/6784/new-video-policies-for-ios/ )