음소거된 동영상 자동재생은 버전 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 또는 기타 위치에서 표시되는 모든 동영상 요소에 대해 작동합니다.
- 새 동작을 활용하려면
autoplay와 함께muted도 추가해야 합니다. simpl.info/video와 simpl.info/video/muted를 비교해 보세요.
지원
- iOS 10 이상 Safari에서는 자동재생 음소거가 지원됩니다.
- Android의 Firefox와 UC 브라우저에서는 음소거 여부와 상관없이 자동재생이 이미 지원되고 있습니다. 자동재생은 어떠한 종류의 자동재생도 차단하지 않습니다.