모바일에서 자동재생 시 음소거 - 캔버스 팁과 애니메이션 GIF는 더 이상 사용할 필요가 없습니다.

Android용 Chrome은 버전 53부터 음소거된 동영상 자동재생이 지원됩니다. autoplaymuted가 모두 설정된 경우 동영상 요소가 표시되면 자동으로 재생이 시작됩니다. 음소거된 동영상의 재생은 play()를 사용하여 실용적으로 시작할 수 있습니다. 이전에는 음소거 상태와 관계없이 모바일에서 재생을 사용자 동작으로 시작해야 했습니다.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

이 샘플을 방문하여 실제 작동 방식을 확인할 수 있습니다. muted 동영상 재생이 Chrome 53 이상에서 자동으로 시작됩니다.

동영상 플레이어 스크린샷입니다.

또한 이제 play() 메서드를 사용하여 음소거된 재생을 시작할 수 있습니다. 이전에는 play()가 버튼 클릭과 같은 사용자 동작에서 비롯된 경우에만 재생을 시작했습니다. Android에서 다음 두 데모를 비교해 보세요. Chrome 53과 이전 버전에서 시도해 보세요.

가능하면 autoplay 속성을 사용하고 필요한 경우에만 play() 메서드를 사용하는 것이 좋습니다.

click와 같은 사용자 동작에 응답하여 프로그래매틱 방식으로 동영상의 음소거를 해제할 수 있지만, 사용자 동작 없이 프로그래매틱 방식으로 동영상의 음소거를 해제하려고 하면 재생이 일시중지됩니다.

muted autoplay 변경으로 play()를 사용하여 DOM에서 생성되지 않은 video 요소(예: WebGL 재생을 유도)를 할 수 있습니다.

play() 메서드는 또한 음소거된 프로그래매틱 재생이 사용 설정되어 있는지 확인하는 데 사용할 수 있는 프로미스를 반환합니다. simpl.info/video/scripted에서 예시를 확인할 수 있습니다.

변경 이유

Android용 Chrome의 이전 버전에서는 자동재생이 사용 중지되었으며, 작동을 방해하고 데이터 사용량이 많을 수 있으며 많은 사용자가 좋아하지 않습니다.

자동재생을 사용 중지하면 개발자가 애니메이션 GIF, <canvas>, <img> 해킹과 같은 대체 앱을 이용하게 되는 의도치 않은 결과를 얻었습니다. 이러한 기법은 전력 소비, 성능, 대역폭 요구사항, 데이터 비용 및 메모리 사용량 측면에서 최적화된 동영상에 비해 훨씬 열악합니다. 동영상은 애니메이션 GIF보다 품질이 우수하며 압축률이 훨씬 높습니다. 동영상은 평균 약 10배, 최대 100배입니다. 자바스크립트로 동영상 디코딩이 가능하기는 하지만 배터리 전원을 크게 소모합니다.

다음 예를 비교해 보겠습니다. 첫 번째는 동영상이고 두 번째는 애니메이션 GIF입니다.

클립 동영상 재생 중

이 두 파일은 매우 비슷해 보이지만, 동영상 크기가 200KB 미만이고 애니메이션 GIF는 900KB가 넘습니다.

Chrome 및 기타 브라우저 공급업체는 사용자 대역폭에 대해 매우 신중을 기하고 있습니다. 많은 경우 많은 사용자에게 높은 데이터 비용이 연결 불량보다 액세스에 더 큰 장애물입니다. 해결 방법이 보편적이기 때문에 음소거된 자동재생은 차단할 수 없습니다. 따라서 좋은 API와 기본값을 제공하는 것이 플랫폼이 할 수 있는 최상의 방법입니다.

웹은 점점 더 미디어 중심이 되고 있습니다. 디자이너와 개발자는 동영상을 사용하는 새롭고 예기치 못한 방법을 계속 모색하고 있습니다. 또한 백그라운드 동영상을 디자인 요소로 사용할 때와 같이 여러 플랫폼에서 일관된 동작을 원합니다. 음소거된 자동재생을 사용하면 모바일과 데스크톱 모두에서 이와 같은 기능이 사용 설정됩니다.

세부 사항

  • 접근성의 관점에서 자동재생은 특히 문제가 될 수 있습니다. Android의 Chrome 53 이상에서는 미디어 설정에서 자동재생을 선택하여 자동재생을 완전히 사용 중지할 수 있습니다.
  • 이 변경사항은 audio 요소에 영향을 미치지 않습니다. 음소거된 자동재생은 오디오에는 적합하지 않으므로 Android의 Chrome에서는 자동재생이 계속 사용 중지됩니다.
  • 데이터 절약 모드가 사용 설정되어 있으면 자동재생되지 않습니다. 데이터 절약 모드가 사용 설정되면 미디어 설정에서 자동재생이 사용 중지됩니다.
  • 음소거된 자동재생은 보이는 모든 문서, iframe 등에 있는 모든 동영상 요소에서 작동합니다.
  • 새 동작을 활용하려면 mutedautoplay를 추가해야 합니다. simpl.info/videosimpl.info/video/muted를 비교해 보세요.

지원

  • 음소거된 자동재생은 iOS 10 이상의 Safari에서 지원됩니다.
  • 음소거 여부와 상관없이 자동재생은 이미 Android에서 Firefox와 UC 브라우저에서 지원되며, 어떤 종류의 자동재생도 차단하지 않습니다.

자세히 알아보기