HTML5 video 태그 자동재생 안 될때
HTML5 새로운 태그 중 <video>라는 태그가 있습니다. 말그대로 비디오 동영상 파일을 재생시키고자 할 때 사용하는 요소입니다. <video>태그에 대해서 이미 자세하게 다룬 글이 있으므로 잘 모르신다면 아래의 글을 한 번 정독 후 본문을 읽어보시면 많은 이해와 도움이 될 것입니다.
HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법
HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법
HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로
rgy0409.tistory.com
위의 본문에서도 나와있지만 정확하게 언급을 하지 않은 부분이 있어서 다시 한 번 개념을 확실히 정리하기위해 이 글을 작성하게 되었습니다. 저도 까먹을 수 있는 부분이기도 하구요.
비디오 포맷 호환 목록
video 태그안에 사용하는 속성 중 autoplay와 loop는 아마도 동영상을 백그라운드에 넣고자 할 때 사용하게 될 것입니다. 그런데 일부 브라우저에서 자동 재생이 안 되는 경우가 있습니다. 동영상 인코딩도 분명 H.264와 AAC 포맷인 MP4임에도 불구하고 말입니다. 아래는 동영상 포맷과 브라우저의 호환성에 대한 표입니다. 참고하시기 바랍니다.
| 브라우저 종류 | MP4 | WEBM | OGG |
| 인터넷 익스플로러 (단종) | ○ | X | X |
| 크롬 | ○ | ○ | ○ |
| 파이어폭스 | ○ | ○ | ○ |
| 사파리 | ○ | X | X |
| 오페라 | ○ | ○ | ○ |
익스플로러는 이제 서비스를 중단했기 때문에 다른 브라우저를 중심으로 살펴보시면 될 것 같습니다. 현재까지는 MP4가 모든 브라우저에서 지원이 되는것으로 확인됩니다. 다만 앞서 언급한대로 H.264 + AAC 방식으로 인코딩된 MP4 포맷이어야 합니다. 이점 꼭 유념해 주시기 바랍니다.
자동 재생이 안 된다면?
만약 오토플레이를 설정했음에도 불구하고 자동 재생이 안 된다면 아래와 같이 muted를 사용해 보시기 바랍니다.
<video src="video/cat.mp4" autoplay loop muted></video>mute라는건 음소거라는 의미입니다. 이것은 크롬과 사파리의 엔진 정책입니다. 동영상의 사운드를 완전히 차단해야 재생이 되도록 설계되었기 때문에 어쩔 수 없는 부분인 것입니다. 아무래도 동영상을 이용한 악용 사례들 때문에 이런 시스템을 적용시키지 않았을까 싶기도 합니다. 이와 관련된 구글 개발자 문서가 아래에 있으니 궁금하시면 참고해 보시기 바랍니다.
https://developer.chrome.com/blog/autoplay/
Autoplay policy in Chrome - Chrome Developers
Learn best practices for good user experiences with the new autoplay policies in Chrome.
developer.chrome.com
스크립트를 활용한 자동 재생
크롬과 사파리 외에 다른 브라우저에서 자동 재생이 되게 하려면 스크립트를 활용한 방법도 있습니다. 아래처럼요.
<script>
document.getElementById('mov01').play();
</script>
<video src="" id="mov01"></video>주의 사항은 video 태그에 id값을 부여해서 스크립트와 연결시켜야 한다는 것입니다. 이것만 주의해서 사용하시면 됩니다. 스크립트는 HTML의 <head>에 넣으시고 <video>는 <body>에 사용하시면 됩니다. 끝.
