동영상의 자동재생 음소거는 버전 53부터 Android용 Chrome에서 지원됩니다. autoplay와 muted가 모두 설정되어 있으면 동영상 요소가 표시될 때 재생이 자동으로 시작되며, 음소거된 동영상의 재생은 play()로 프로그래매틱하게 시작할 수 있습니다. 이전에는 음소거 상태와 관계없이 사용자 동작으로 모바일에서 재생을 시작해야 했습니다.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
이 샘플을 방문하여 실제 동작을 확인할 수 있습니다. Chrome 53 이상에서는 muted 동영상 재생이 자동으로 시작됩니다.
또한 이제 play() 메서드를 사용하여 음소거된 재생을 시작할 수 있습니다. 이전에는 play()가 버튼 클릭과 같은 사용자 동작에서 시작된 경우에만 재생을 시작했습니다. Android에서 다음 두 데모를 비교해 보세요. Chrome 53에서 실행한 다음 이전 버전에서 실행해 보세요.
가능하면 autoplay 속성을 사용하고 필요한 경우에만 play() 메서드를 사용하는 것이 좋습니다.
click와 같은 사용자 동작에 따라 프로그래매틱 방식으로 동영상의 음소거를 해제할 수 있지만 사용자 동작 없이 프로그래매틱 방식으로 동영상의 음소거를 해제하려고 하면 재생이 일시중지됩니다.
muted autoplay 변경을 통해 DOM에서 생성되지 않은 video 요소와 함께 play()를 사용할 수도 있습니다(예: WebGL 재생을 유도).
play() 메서드는 프로미스를 반환하기도 하며, 이를 사용하여 음소거된 프로그래매틱 재생이 사용 설정되었는지 확인할 수 있습니다. simpl.info/video/scripted에서 이 예시를 확인할 수 있습니다.
변경 이유
이전 버전의 Android용 Chrome에서는 자동 재생이 중단될 수 있고, 데이터를 많이 사용하며, 많은 사용자가 좋아하지 않기 때문에 사용 중지되었습니다.
자동 재생을 사용 중지하면 개발자가 애니메이션 GIF, <canvas>, <img> 해킹과 같은 대안을 사용하게 되는 의도치 않은 결과가 발생했습니다. 이러한 기법은 전력 소비, 성능, 대역폭 요구사항, 데이터 비용, 메모리 사용량 측면에서 최적화된 동영상보다 훨씬 나쁩니다. 동영상은 애니메이션 GIF보다 품질이 높고 압축률이 훨씬 좋습니다. 평균 10배, 최대 100배까지 압축률이 높습니다. JavaScript로 동영상을 디코딩하는 것은 가능하지만 배터리 소모가 매우 큽니다.
다음 두 가지를 비교해 보세요. 첫 번째는 동영상이고 두 번째는 애니메이션 GIF입니다.
두 이미지는 매우 비슷하지만 동영상은 크기가 200KB 미만이고 애니메이션 GIF는 900KB를 초과합니다.
Chrome 및 기타 브라우저 공급업체는 사용자 대역폭에 매우 신중합니다. 많은 상황에서 많은 사용자에게 데이터 비용이 높다는 점은 연결 상태가 좋지 않다는 점보다 액세스에 더 큰 장벽이 됩니다. 해결 방법이 널리 퍼져 있으므로 음소거 자동 재생은 차단할 수 없습니다. 따라서 좋은 API와 기본값을 제공하는 것이 플랫폼에서 할 수 있는 최선입니다.
웹은 점점 미디어 중심으로 바뀌고 있습니다. 디자이너와 개발자는 동영상을 사용하는 새롭고 예상치 못한 방법을 계속해서 찾고 있으며, 디자인 요소로 백그라운드 동영상을 사용하는 경우와 같이 플랫폼 전반에서 일관된 동작을 원합니다. 음소거된 자동 재생은 모바일과 데스크톱 모두에서 이와 같은 기능을 지원합니다.
세부사항
- 접근성 관점에서 자동재생은 특히 문제가 될 수 있습니다. Android의 Chrome 53 이상에서는 자동 재생을 완전히 사용 중지하는 설정을 제공합니다. 미디어 설정에서 자동 재생을 선택하세요.
- 이 변경사항은
audio요소에 영향을 미치지 않습니다. 음소거된 자동 재생은 오디오에 적합하지 않으므로 Android의 Chrome에서는 자동 재생이 계속 사용 중지됩니다. - 데이터 절약 모드가 사용 설정된 경우 자동재생이 없습니다. 데이터 절약 모드가 사용 설정된 경우 미디어 설정에서 자동재생이 사용 중지됩니다.
- 음소거된 자동재생은 표시되는 문서, iframe 또는 기타 요소에 표시되는 동영상 요소에 작동합니다.
- 새 동작을 활용하려면
muted와autoplay를 모두 추가해야 합니다. simpl.info/video와 simpl.info/video/muted를 비교해 보세요.
지원
- 음소거된 자동 재생은 iOS 10 이상의 Safari에서 지원됩니다.
- 음소거 여부와 관계없이 자동재생은 이미 Firefox와 UC 브라우저에서 Android를 통해 지원됩니다. 이러한 브라우저는 어떤 종류의 자동재생도 차단하지 않습니다.