Safari에서 비디오 자동재생하기 (WeBM 파일 포함 필요)

 

웹사이트에 비디오를 삽입하는 것은 사용자 참여를 크게 향상시킬 수 있지만, 특히 Safari에서 이러한 비디오가 원활하게 재생되도록 하는 것은 어려울 수 있습니다. macOS와 iOS 모두에서 Safari는 비디오 재생에 대해 특정 제한과 행동 방식을 가지고 있습니다. 또한 MP4와 WebM과 같은 여러 비디오 형식을 지원하는 것도 폭넓은 호환성을 보장하는 데 필수적입니다. 이 블로그 게시물에서는 Safari와 다른 브라우저에서 완전한 호환성을 유지하면서 비디오를 삽입하는 모범 사례에 대해 깊이 있게 다루겠습니다.

1. Safari의 자동 재생 제한 이해하기

Safari는 특히 사용자 경험을 향상하고 대역폭을 절약하기 위해 엄격한 자동 재생 제한을 적용합니다. 기본적으로 Safari는 비디오가 특정 조건을 충족하지 않으면 자동 재생을 차단합니다:

• 음소거된 비디오: 비디오가 음소거된 경우 일반적으로 자동 재생이 허용됩니다. 이는 특히 예상치 못한 오디오가 방해가 될 수 있는 모바일 기기에서 중요합니다.
• 사용자 상호작용: 사용자가 페이지와 상호작용한 경우(예: 버튼을 클릭하거나 화면을 터치한 경우), Safari는 자동 재생을 허용할 가능성이 더 큽니다.

해결책: 자동 재생이 필요한 비디오를 항상 음소거하세요.

<video autoplay muted playsinline preload="auto">
    <source src="path_to_your_video.mp4" type="video/mp4">
    <source src="path_to_your_video.webm" type="video/webm">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

2. playsinline 속성 사용하기

iOS 기기에서 Safari는 기본적으로 비디오를 전체 화면으로 재생하려고 합니다. 그러나 playsinline 속성을 설정하지 않으면 이 행동이 발생할 수 있습니다. 비디오가 페이지 콘텐츠의 일부로 의도된 경우(즉, 전체 화면 경험이 아닌 경우) 이 행동은 바람직하지 않을 수 있습니다.

해결책: playsinline 속성을 추가하여 비디오가 페이지 내에서 재생되도록 하여 웹 페이지의 흐름을 유지하세요.

<video autoplay muted playsinline preload="auto">
    <source src="path_to_your_video.mp4" type="video/mp4">
    <source src="path_to_your_video.webm" type="video/webm">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

3. Picture-in-Picture (PiP) 모드 처리하기

Safari는 비디오를 작은 이동 가능한 창에서 재생할 수 있는 Picture-in-Picture (PiP) 모드를 지원합니다. 사용자를 위한 훌륭한 기능이 될 수 있지만, 배경 비디오 또는 자동 재생 시나리오에서는 페이지의 의도된 경험과 맞지 않을 수 있습니다.

해결책: disablePictureInPicture 속성을 사용하여 PiP가 불필요한 비디오에서는 이 기능을 비활성화하세요.

<video autoplay muted playsinline disablePictureInPicture preload="auto">
    <source src="path_to_your_video.mp4" type="video/mp4">
    <source src="path_to_your_video.webm" type="video/webm">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

4. 적절한 비디오 형식 및 인코딩 보장하기

Safari가 MP4 비디오를 지원하더라도, 비디오가 올바르게 인코딩되어 있는지 확인하는 것이 중요합니다. Safari는 H.264로 인코딩된 비디오와 AAC로 인코딩된 오디오를 선호합니다. 비디오가 재생되지 않는 경우, 잘못된 인코딩이 원인일 수 있습니다.

해결책: HandBrake 또는 FFmpeg와 같은 도구를 사용하여 비디오를 다시 인코딩하여 호환성을 보장하세요.

HandBrake 사용:

• MP4 형식을 선택하세요.
• 비디오 코덱을 H.264로 설정하세요.
• 오디오 코덱을 AAC로 설정하세요.

FFmpeg 사용:

ffmpeg -i input_video.mp4 -vcodec h264 -acodec aac output_video.mp4

이 명령어는 Safari의 모든 버전에서 호환성이 더 높은 비디오 파일을 생성합니다.

5. 더 넓은 브라우저 호환성을 위한 WebM 비디오 추가하기

MP4가 널리 지원되지만, WebM 비디오 형식을 추가하면 일부 플랫폼의 Firefox 또는 Chrome과 같은 브라우저와의 호환성을 보장할 수 있습니다.

해결책: <video> 태그에 MP4와 WebM 비디오 형식을 모두 포함하세요.

<video autoplay muted playsinline preload="auto">
    <source src="path_to_your_video.mp4" type="video/mp4">
    <source src="path_to_your_video.webm" type="video/webm">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

이 설정은 WebM만 지원하는 브라우저에서도 비디오가 재생되도록 하며, Safari와 MP4를 선호하는 다른 브라우저에서는 MP4 버전을 기본적으로 재생하게 합니다.

6. 더 원활한 재생을 위한 비디오 미리 로드하기

Safari는 preload 속성을 지원하여 재생이 시작되기 전에 비디오 데이터를 로드하는 데 도움을 줍니다. 이를 통해 지연과 버퍼링을 방지하여 더 원활한 시청 경험을 제공합니다.

해결책: 비디오 데이터를 미리 로드하기 위해 preload="auto" 속성을 사용하세요.

<video autoplay muted playsinline preload="auto">
    <source src="path_to_your_video.mp4" type="video/mp4">
    <source src="path_to_your_video.webm" type="video/webm">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

7. Safari에서 테스트하기

비디오를 프로덕션에 배포하기 전에 macOS와 iOS 기기에서 직접 Safari에서 테스트하는 것이 중요합니다. Safari의 동작은 데스크톱 버전과 모바일 버전 간에 다를 수 있으므로, 실제 기기에서 테스트하여 일관된 사용자 경험을 보장하는 것이 중요합니다.

해결책: Safari에서 웹사이트를 열고 다음 사항을 철저히 테스트하세요:

• 자동 재생 동작(음소거 여부에 따라)
• iOS 기기에서의 인라인 재생
• 전체 화면 동작
• 비디오 품질과 부드러움
• Safari의 콘솔에서 발생하는 오류 메시지(Command + Option + I로 개발자 도구 열기)

8. 대체 솔루션

Safari의 제한으로 인해 비디오가 의도한 대로 재생되지 않는 경우, 대체 옵션을 제공하는 것이 좋습니다. 예를 들어, 사용자가 수동으로 비디오를 시작할 수 있도록 명확한 재생 버튼 오버레이를 표시하세요.

해결책: 자동 재생이 실패할 경우 표시되는 재생 버튼 오버레이를 만드세요.

const videoElement = document.getElementById('myVideo');
videoElement.play().catch(error => {
    console.log('자동 재생이 차단되었습니다:', error);
    // 비디오를 수동으로 시작할 수 있는 재생 버튼 또는 기타 UI를 표시
    document.getElementById('playButton').style.display = 'block';
});

결론

Safari의 고유한 비디오 재생 처리 방식은 특별한 주의가 필요하지만, 위에서 설명한 전략을 따르면 사용자 경험을 저해하지 않으면서 Safari에서 비디오가 잘 작동하도록 할 수 있습니다. MP4와 WebM 형식을 모두 포함하고, 비디오의 자동 재생을 위해 음소거 설정을 하고, 인라인 재생을 보장하며, 철저한 테스트를 통해 모든 기기와 브라우저에서 원활한 비디오 경험을 제공하세요.