<video>태그 브라우저, 모바일 이슈 정리 사항

<video>태그 브라우저, 모바일 이슈 정리 사항

몇 주 전쯤에 <iframe>으로 작업하던 것들을 웹 앱 이슈상 <video>태그로 변경하는 작업을 하였다.

이 작업의 이유는 회사 정책의 문제였다.

 

+) 비디오 태그로 변경을 하면서 진행했던 부분은 자동재생이었다.

하지만 몇가지 이슈가 있었다.

 

이슈

1. autoplay를 걸었음에도 안된다.

2. 아이폰에서 전체화면이 된다. 

+) 같은 os 버전임에도 아이폰8은 전체화면으로 넘어갔고, 아이폰10은 정상적으로 inline 노출이 되었다.

3. ie8 안됨

 

<video> 태그 자동 재생 이슈

- 대부분의 브라우저에서 <video>의 자동재생을 원한다면 음소거(muted)속성을 필수로 추가하여야 한다.

(크롬도 작년 6월부터 브라우저 정책이 바뀌었다고 한다)

참고

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

https://lifehacker.com/mute-most-autoplay-videos-with-the-latest-chrome-update-1825354497

 

자동 재생이 가능한 경우는

1. 같은 도메인에서 이벤트가 발생한 경우(클릭, 페이지이동)

- 위와 같은 방법때문에 작년에 변경되었음에도 이제 이슈가 발견되었다.

2. 비디오 내에 오디오 트랙이 없을 경우.

http://iropke.com/archive/video-autoplay.html

여기 블로거분이 테스트한 경우를 보면 파일 자체에 오디오 정보가 없어야한다!(소리가 녹음이 안된거랑은 다른 개념)

3. muted 속성을 적용했을 경우

4. iphone에서 playsinline 요소를 추가하였을 경우 (webkit 접두어를 추가하여 webkit-playsinline으로 추가하여 사용했었으나 최근 HTML 사양에 추가되어 접두사 없이도 사용가능하다.)

5. 모바일일 때 해당 사이트를 홈 스크린에 즐겨찾기 한 경우

6. 부모 Frame이 권한을 부여하여 자식 Frame에서 비디오를 실행했을 경우 (?)

참고

https://medium.com/@idchoi2/html5-video-%ED%83%9C%EA%B7%B8-%EC%9E%90%EB%8F%99%EC%9E%AC%EC%83%9D-%EC%9D%B4%EC%8A%88-f97e5d397516

 

결론적으로 우리가 <video>태그 사용할 때 자동 재생을 원한다면 필수로 넣어야하는 속성 3가지이다.

autoplay

muted

playsinline

 

- pc 브라우저, 안드로이드는 autoplay, muted 속성만 추가하여도 자동 재생이 가능하다.

- 아이폰은 IOS10버전 이후부터 playsinline 속성을 추가 적용해주어야한다.

(아이폰8에서는 IOS12.2 버전으로 테스트 한 결과 전체화면으로 자동재생 되었으나 업데이트 문서에 IOS10 이후부터 적용 되었다고 작성되어있다)

참고 

https://medium.com/code-divoire/autoplaying-inline-videos-on-iphone-ios-10-using-angular-d4e2eaba2164

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline

 

★★★추가로 아이폰 저전력모드일때 위의 속성을 넣었음에도 자동재생이 안된다고 한다.★★★

 

하위브라우저 이슈 (HTML5 태그라서 ie8이하는 지원이 안됩니다.)

- 포스터 이미지와 안내 문구를 삽입해 주어야 한다.

ie8이하에서는 source가 렌더링되지 않기 때문에 이미지나 텍스트가 나오게 할 수 있다.

아래 처럼 비디오 태그 내부에 넣어주면 된다.

// HTML

<video>
  <source src="비디오 링크" type="비디오 타입">
  <img src="이미지 링크">
  <p>브라우저 버전이 낮다</p>
</video>

혹은 별도로 주석문을 달아준다.

// HTML

<!--[if lte IE8]>
    <p>브라우저 버전이 낮다</p>
<![endif]-->

 

미디어쿼리

비디오 인라인 css

// HTML
<style>
  #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; }
  }
</style>

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

참고

https://webkit.org/blog/6784/new-video-policies-for-ios/

 

++++ 0406 추가

코드펜에 테스트하신 분이 있어서 링크를 달아둔다.

https://codepen.io/alfmos/pen/VwwqQje

 

++++ 추가 이슈

애플 기기에서(아이폰, 맥..) 비디오 객체는 HTML에 넣은 후에 동적으로 비디오 태그의 링크만 바꿔치기 할때,

애플에 내장된 비디오 버튼에 대한 이슈가 발생했다.

 

정확히 발생한 내역은 버튼 클릭 시 해당 버튼에 삽입된 링크의 값이 비디오 태그의 src에 박히는 것이었는데,

이때 사용자가 첫번째 비디오를 재생하다가 다른 버튼을 눌러 두번째 비디오가 로드되었을 때

애플 내장 비디오의 컨트롤바의 버튼이 여전히 재생되어있음으로 되어있는 것이었다, 재렌더링을 안하는 듯 싶었다.

안드로이드는 링크가 변경되고 .load()를 시킬때 마다 내장 비디오의 컨트롤바까지 재렌더링을 하는 듯 싶어 이 이슈는 발생하지 않았다.

(재렌더링 하냐 안하냐의 문제가 아닐수도 있다.)

 

사용자가 처음 재생을 누른 상태

 

다른 비디오 src를 삽입하고 재로드 시켰음에도 여전히 재생하는 듯 보인다.

그냥 개발 방식을 바꿔서 작업하느라 이슈에 대한 사항은 넘어가기로했다.