<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에서 비디오를 실행했을 경우 (?)
참고
결론적으로 우리가 <video>태그 사용할 때 자동 재생을 원한다면 필수로 넣어야하는 속성 3가지이다.
| autoplay | muted | playsinline |
- pc 브라우저, 안드로이드는 autoplay, muted 속성만 추가하여도 자동 재생이 가능하다.
- 아이폰은 IOS10버전 이후부터 playsinline 속성을 추가 적용해주어야한다.
(아이폰8에서는 IOS12.2 버전으로 테스트 한 결과 전체화면으로 자동재생 되었으나 업데이트 문서에 IOS10 이후부터 적용 되었다고 작성되어있다)
참고
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()를 시킬때 마다 내장 비디오의 컨트롤바까지 재렌더링을 하는 듯 싶어 이 이슈는 발생하지 않았다.
(재렌더링 하냐 안하냐의 문제가 아닐수도 있다.)
그냥 개발 방식을 바꿔서 작업하느라 이슈에 대한 사항은 넘어가기로했다.
'~2022 > FE-HTML, CSS, ...etc' 카테고리의 다른 글
| 아이프레임(iframe)이란? (0) | 2019.06.05 |
|---|---|
| 조건부 주석(Conditional comments) (0) | 2019.06.05 |
| CSS3 란 (Cascading Style Sheets) (0) | 2019.06.05 |
| HTML5 란? (0) | 2019.06.05 |
| CSS3 Selector :nth-child(n+n)를 알아보자 (0) | 2018.10.26 |
| html 기본 구조 (0) | 2018.10.23 |
| html만으로 아코디언 메뉴 만들기(details와 summary태그) (0) | 2018.10.23 |
| HTML 특수 문자 처리 (엔티티 테이블) (0) | 2018.10.23 |
