웹 프론트엔드/동영상 Video

HTML5 비디오 자동 재생 관련 정책 및 조건(Chrome, Safari를 중심으로)

아로리(arori) 2020. 2. 8. 17:01
반응형

이 글은 Google Developers 의 자동 재생 정책 변경사항, Webkit 블로그의 iOS를 위한 새로운 <video> 정책, macOS를 위한 자동 재생 정책 변경사항을 기반으로 정리하였고, 검증을 위해 몇가지 브라우저로 테스트 하였습니다. 디바이스, 브라우저 종류와 버전 등 환경에 따라 자동 재생에 대한 정책이 다르므로 해당 글과 다른 점 있을 수 있다는 것 말씀드립니다.

자동 재생이 되는 경우

1. 무음인 경우 항상 자동 재생이 가능.

  • 음소거 ON: <video> 요소에 muted 속성을 추가 하거나, video.muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다.

    <!-- #1 <video> 요소에 muted 속성 추가 -->
<video autoplay muted>
    var video = document.querySelector('video');
video.muted = true; // #2 video.muted 값을 true로 설정

  • 음소거 OFF & 볼륨 0: video.muted 값은 false 이고, video.volume 값이 0 인 경우 일부 환경(iPhone, 삼성 브라우저)에서는 자동 재생이 불가합니다.

  • 오디오 트랙 없음: 비디오 파일에 오디오 트랙이 없는 경우 일부 브라우저(Safari, Firefox)는 muted 여부와 별개로 자동 재생이 가능합니다.

  • 무음 오디오 트랙: 해당 브라우저에서 유효한 무음 상태가 아니면서, 무음인 오디오 트랙이 있는 경우 자동 재생이 불가합니다.

테스트 페이지(Codepen) - 정확한 확인을 위해 별도 창에서 확인하는 것을 추천. 

See the Pen 무음 자동 재생 테스트 by arori (@arori) on CodePen.

2. 동일 origin 도메인 내에서 유저 인터렉션 이벤트 발생 시 유음 자동 재생. (Chrome)

3. 도메인의 MEI 점수가 임계 값을 넘으면 유음 자동 재생 가능. (PC Chrome)

  • MEI(Media Engagement Index)는 도메인 내에서 미디어 소비를 점수화 한 것입니다.
  • 즉, 특정 PC에서 특정 도메인에 유음으로 미디어를 자주 소비하면 해당 PC에서, 그 도메인은 유음 재생 가능합니다.
  • MEI(Media Engagement Index) 참고 링크

4. PWA를 설치한 경우, 유음 자동 재생 가능. (Chrome)

  • "+" 아이콘을 클릭하거나(PC), "홈 화면에 추가" 하여 (Mobile) 설치하거나 유음 자동 재생 가능합니다.

"+" 아이콘으로 PWA 설치(PC)
"홈 화면에 추가" 로 PWA 설치 (Mobile)

5. Feature Policy에 의해 상위에서 자동 재생 권한을 위임하면 유음 재생 가능. (Chrome)

  • 재생하고자 하는 주체가 iframe일 때, 상위에서 자동 재생 권한을 위임하면 유/무음 자동 재생이 가능합니다.

    <iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

  • 상위가 자동 재생 권한을 위임하는 것이므로, 상위에서 권한이 없는 경우 유/무음 자동 재생 불가합니다.

  • Feature Policy 참고 링크, autoplay feature policy 참고 링크

6. 브라우저 사용자 옵션으로 동영상 자동 재생 허용 되어있는 경우 유/무음 자동 재생 가능.

자동 재생이 되지 않는 경우

1. 유음인 경우 자동 재생 불가.

2. 무음 자동 재생 후, 유저 인터렉션 없이 유음으로 변경해도 유음 자동 재생 불가.

  • 기본적으로 비디오가 인터렉션 없이 유음으로 변경 되는 경우, 비디오는 일시정지 됩니다.

3. <video autoplay>가 온전히 보이지 않은 경우 무음 자동 재생 불가.

  • <video> 요소에 autoplay 속성으로 무음 자동 재생을 할 때, 아래와 같은 경우는 재생 불가합니다.
    1. CSS를 통해 보이지 않는(invisible) 경우.
    2. 비디오가 뷰포트(Viewport) 밖에 있는 경우.
      • 무음 자동 재생 중에 스크롤 등으로 인해 비디오가 뷰포트 밖으로 나가는 경우, 일시 정지됩니다.
    3. DOM에 삽입되지 않은 경우.
  • 다른 자동 재생이 가능한 조건을 갖추었을 때, play() 함수를 이용하는 경우는 온전히 보이지 보이지 않아도 자동 재생(=유저 인터렉션 없이 재생)가능합니다.

4. 저전력 모드가 켜져있는 경우 유/무음 자동 재생 불가. (iPhone)

iPhone "설정" > "배터리" > "저전력 모드" 스크린 샷

5. 브라우저 사용자 옵션으로 동영상 자동 재생 차단 되어있는 경우 유/무음 자동 재생 불가.

개발자 참고 사항

1. 항상 자동 재생이 될 것이라고 가정하지 말고 개발 해야 함.

  • 자동 재생이 되지 않은 상황을 대비하여

    1. 미디어 컨트롤을 노출하지 않거나, 무조건 일시 정지 버튼으로 노출하지말고 상황에 맞는 미디어 컨트롤을 항상 표시해야 합니다.

    2. 자바스크립트 play() 함수로 자동 재생을 구현 하는 경우에는 reject 되는 상황을 고려해야 합니다.

      var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // 자동 재생 시작!
  }).catch(error => {
    // 자동 재생이 막힘.
    // "Play" 버튼을 노출해 유저가 재생을 시작할 수 있도록 한다
  });
}

  • 유튜브의 경우 미디어 컨트롤은 항상 표시되어있고, "유음 자동 재생 > 불가시 무음 자동 재생 > 불가시 정지 화면에 재생 버튼 노출" 로 서비스하고 있습니다.

  • 자동 재생 가능/불가 환경을 가상으로 만들어 테스트해 볼 수 있습니다. (Chrome, Safari)

    Mac Safari "환경설정" > "웹사이트" > "자동 재생" 스크린샷 

2. 자동 재생 제한은 요소 별로 부여 됨.

  • 만약 여러 비디오를 연속해서 재생하려면(광고 등) 여러 미디어 요소를 만드는 대신 미디어 요소의 소스(source)를 변경하는 것이 좋습니다.
  • 유튜브에서 광고 재생 후 본편 영상 재생시 비디오 소스 변경 예시

유튜브 광고 영상 재생시 비디오 소스 코드 영역
유투브 본편 영상 재생시 비디오 소스 코드 영역

그 외 읽을거리

1. 자동 재생 정책 완화에 영향을 미친 것

  • GIF파일의 Video화.

    • GIF 파일은 흔히 짤방(Meme)에 사용 되는 포맷입니다. 하지만 인코딩 비용이 최신 비디오 코덱보다 비싸 더 큰 대역폭 사용하고, 더 많은 배터리 소모해서 여러 유명 사이트들이 GIF파일을 Video로 변경하여 서비스하기 시작했습니다. Video로 변경하면서 자동으로 재생되지 않아 GIF 대비 사용성 저하되는 문제가 발생하기 시작했습니다.

  • Video의 페이지 표현 요소화.

    • 비디오를 페이지의 콘텐츠가 아니라 사이트를 표현하는 요소로 사용하는 경우에 자동 재생이 없이는 정상적으로 노출되지 않습니다.

    비디오를 표현적 요소로 사용하는 웹사이트 (https://www.weareenvoy.com/)

2. 자동 재생 정책 강화에 영향을 미친 것

참고 링크

반응형
저작자표시

'웹 프론트엔드/동영상 Video'의 다른글

  • 현재글HTML5 비디오 자동 재생 관련 정책 및 조건(Chrome, Safari를 중심으로)

관련글

댓글

티스토리툴바