웹용 올바르게 동영상 파일을 준비했습니다. 올바른 크기와 해상도를 제공했습니다. 브라우저별로 별도의 WebM 및 MP4 파일도 만들었습니다.
누구나 동영상을 볼 수 있도록 하려면 동영상을 웹페이지에 추가해야 합니다. 이렇게 하려면 두 개의 HTML 요소, 즉 <video>
요소와 <source>
요소를 추가해야 합니다. 이 도움말에서는 이러한 태그에 관한 기본사항 외에도 우수한 사용자 환경을 만들기 위해 태그에 추가해야 하는 속성을 설명합니다.
단일 파일 지정
권장되지는 않지만 동영상 요소만 사용할 수 있습니다. 항상 아래와 같이 type
속성을 사용합니다. 브라우저는 이를 사용하여 제공된 동영상 파일을 재생할 수 있는지 확인합니다. 텍스트를 표시할 수 없는 경우 묶은 텍스트가 표시됩니다.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
여러 파일 형식 지정
미디어 파일 기본사항에서 일부 브라우저는 동일한 동영상 형식을 지원하지 않는다는 점을 떠올려 보세요. <source>
요소를 사용하면 사용자의 브라우저가 해당 형식 중 하나를 지원하지 않는 경우 여러 형식을 대체로 지정할 수 있습니다.
아래 예에서는 이 도움말의 뒷부분에서 예로 사용할 삽입된 동영상을 생성합니다.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
선택사항이지만 항상 type
속성을 <source>
태그 이벤트에 추가해야 합니다. 이렇게 하면 브라우저에서 재생할 수 있는 파일만 다운로드합니다.
이 접근 방식에는 특히 모바일에서 다른 HTML 또는 서버 측 스크립팅을 제공하는 것에 비해 여러 이점이 있습니다.
- 선호도 순으로 형식을 나열할 수 있습니다.
- 클라이언트 측 전환은 지연 시간을 줄여줍니다. 단 한 번의 요청만으로 콘텐츠를 가져올 수 있습니다.
- 브라우저에서 형식을 선택하도록 하는 것은 사용자 에이전트 감지와 함께 서버 측 지원 데이터베이스를 사용하는 것보다 더 간단하고 빠르고 안정적입니다.
- 각 파일 소스의 유형을 지정하면 네트워크 성능이 개선됩니다. 브라우저에서는 형식을 '스니핑'하기 위해 동영상의 일부를 다운로드하지 않고도 동영상 소스를 선택할 수 있습니다.
이러한 문제는 대역폭과 지연 시간이 중요하고 사용자의 인내심이 제한될 가능성이 있는 모바일 환경에서 특히 중요합니다. type
속성을 생략하면 지원되지 않는 유형의 소스가 여러 개 있는 경우 성능에 영향을 줄 수 있습니다.
몇 가지 방법을 통해 세부정보를 살펴볼 수 있습니다. 웹에서 동영상 및 오디오가 작동하는 방식에 관한 자세한 내용은 괴짜를 위한 디지털 미디어 입문서를 참고하세요. 또한 DevTools에서 원격 디버깅을 사용하여 네트워크 활동을 유형 속성 및 유형 속성이 없는 네트워크 활동을 비교할 수도 있습니다.
시작 및 종료 시간 지정
대역폭을 절약하고 사이트의 응답성을 높이세요. 미디어 프래그먼트를 사용하여 동영상 요소에 시작 및 종료 시간을 추가하세요.
미디어 프래그먼트를 사용하려면 #t=[start_time][,end_time]
를 미디어 URL에 추가합니다. 예를 들어 5초부터 10초까지 동영상을 재생하려면 다음과 같이 지정합니다.
<source src="video/chrome.webm#t=5,10" type="video/webm">
<hours>:<minutes>:<seconds>
에서 시간을 지정할 수도 있습니다. 예를 들어 #t=00:01:05
는 1분 5초부터 동영상을 시작합니다. 동영상의 처음 1분만 재생하려면 #t=,00:01:00
를 지정합니다.
이 기능을 사용하면 여러 파일을 인코딩하고 게재하지 않고도 DVD의 큐 포인트와 같이 동일한 동영상의 여러 조회수를 제공할 수 있습니다.
이 기능이 작동하려면 서버가 범위 요청을 지원하고 이 기능이 사용 설정되어 있어야 합니다. 대부분의 서버는 기본적으로 범위 요청을 사용 설정합니다. 일부 호스팅 서비스에서는 이를 사용 중지하므로 사이트에서 프래그먼트를 사용하는 데 범위 요청을 사용할 수 있는지 확인해야 합니다.
다행히 브라우저 개발자 도구에서 이 작업을 수행할 수 있습니다. 예를 들어 Chrome에서는 네트워크 패널에 표시됩니다. Accept-Ranges
헤더를 찾아 bytes
인지 확인합니다. 이미지에서 이 헤더 주위에 빨간색 상자를 그렸습니다. bytes
가 값으로 표시되지 않으면 호스팅 제공업체에 문의해야 합니다.
![Chrome DevTools 스크린샷: Accept-Ranges: bytes.](https://web.dev/static/articles/video-and-source-tags/image/chrome-devtools-screensho-cd70c057af37e.png?authuser=3&hl=ko)
포스터 이미지 포함
동영상을 다운로드하거나 재생을 시작하지 않고도 요소가 로드되는 즉시 콘텐츠를 볼 수 있도록 포스터 속성을 video
요소에 추가합니다.
<video poster="poster.jpg" ...>
…
</video>
동영상 src
가 깨지거나 제공된 동영상 형식이 지원되지 않는 경우에도 포스터를 대체할 수 있습니다. 포스터 이미지의 유일한 단점은 일부 대역폭을 사용하고 렌더링이 필요한 추가 파일 요청입니다.
자세한 내용은 효율적인 이미지 인코딩을 참고하세요.
![대체 포스터가 없으면 동영상이 깨진 것처럼 보입니다.](https://web.dev/static/articles/video-and-source-tags/image/without-fallback-poster-40d22fe6b95af.png?authuser=3&hl=ko)
![대체 포스터에서는 첫 번째 프레임이 캡처된 것처럼 보입니다.](https://web.dev/static/articles/video-and-source-tags/image/a-fallback-poster-makes-97991ed2f2275.png?authuser=3&hl=ko)
동영상이 컨테이너를 오버플로하지 않도록 방지
동영상 요소가 표시 영역에 비해 너무 크면 컨테이너가 오버플로되어 사용자가 콘텐츠를 보거나 컨트롤을 사용하지 못하게 될 수 있습니다.
![Android Chrome 스크린샷, 세로 모드: 스타일이 지정되지 않은 동영상 요소가 표시 영역을 오버플로합니다.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-2f9f737cb9bf1.png?authuser=3&hl=ko)
![Android Chrome 스크린샷, 가로 모드: 스타일이 지정되지 않은 동영상 요소가 표시 영역을 오버플로합니다.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-0a3ad7fb3e37.png?authuser=3&hl=ko)
CSS를 사용하여 동영상 크기를 제어할 수 있습니다. CSS가 모든 요구사항을 충족하지 않는 경우 FitVids와 같은 JavaScript 라이브러리 및 플러그인이 도움이 될 수 있습니다. YouTube 및 기타 소스의 동영상에서도 가능합니다. 하지만 이러한 리소스는 네트워크 페이로드 크기를 증가시켜 수익과 사용자의 지갑에 부정적인 영향을 미칠 수 있습니다.
여기서 설명하는 것과 같은 간단한 사용의 경우 CSS 미디어 쿼리를 사용하여 표시 영역 크기에 따라 요소의 크기를 지정하세요. max-width:
100%
를 사용하면 됩니다.
iframe의 미디어 콘텐츠 (예: YouTube 동영상)의 경우 반응형 접근 방식(John Surdakowski 제안)을 사용해 보세요.
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
반응형 샘플과 응답하지 않는 버전을 비교합니다. 보시다시피 응답하지 않는 버전은 만족스러운 사용자 환경이 아닙니다.
기기 방향
데스크톱 모니터나 노트북에서는 기기 방향이 문제가 되지 않지만 휴대기기 및 태블릿용 웹페이지 디자인을 고려할 때는 기기 방향이 매우 중요합니다.
iPhone의 Safari에서는 세로 모드 방향과 가로 모드 방향이 원활하게 전환됩니다.
![iPhone의 Safari에서 재생되는 동영상의 스크린샷, 세로 모드](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-76f52b9e92365.png?authuser=3&hl=ko)
![iPhone의 Safari에서 재생되는 동영상의 스크린샷, 가로 모드](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-0d5d0af24767b.png?authuser=3&hl=ko)
iPad 및 Android용 Chrome에서 기기 방향이 문제가 될 수 있습니다. 예를 들어 맞춤설정 없이 iPad에서 가로 방향으로 재생되는 동영상은 다음과 같습니다.
![iPad의 Safari에서 재생되는 동영상의 스크린샷, 가로 모드](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-792c6c149e81f.png?authuser=3&hl=ko)
CSS를 사용하여 동영상 width: 100%
또는 max-width: 100%
를 설정하면 다수의 기기 방향 레이아웃 문제를 해결할 수 있습니다.
자동재생
autoplay
속성은 브라우저에서 동영상을 즉시 다운로드하고 재생할지를 제어합니다. 정확한 작동 방식은 플랫폼과 브라우저에 따라 다릅니다.
Chrome: 광고가 데스크톱에 있는지, 모바일 사용자가 홈 화면에 사이트나 앱을 추가했는지를 포함하되 이에 국한되지 않는 다양한 요소에 따라 달라집니다. 자세한 내용은 자동재생 권장사항을 참고하세요.
Firefox: 모든 동영상과 사운드를 차단하지만, 사용자가 모든 사이트 또는 특정 사이트의 이러한 제한사항을 완화할 수 있습니다. 자세한 내용은 Firefox에서 미디어 자동재생 허용 또는 차단을 참고하세요.
Safari: 지금까지 사용자 동작이 필요했지만 최신 버전에서는 이러한 요구사항을 완화해 왔습니다. 자세한 내용은 iOS의 새로운 <video> 정책을 참조하세요.
자동재생이 가능한 플랫폼에서도 사용 설정하는 것이 좋은지 고려해야 합니다.
- 데이터 사용은 비용이 많이 들 수 있습니다.
- 사용자가 자기 전에 미디어를 재생하면 대역폭과 CPU가 과도하게 소모되어 페이지 렌더링이 지연될 수 있습니다.
- 동영상 또는 오디오 재생이 사용자에게 방해가 될 수 있습니다.
프리로드
preload
속성은 미리 로드할 정보나 콘텐츠의 양에 관한 힌트를 브라우저에 제공합니다.
값 | 설명 |
---|---|
none |
사용자가 동영상을 시청하지 않을 수 있으므로 아무것도 미리 로드하지 마세요. |
metadata |
메타데이터 (재생 시간, 크기, 텍스트 트랙)가 미리 로드되어야 하지만 최소한의 동영상이 필요합니다. |
auto |
전체 동영상을 즉시 다운로드하는 것이 바람직한 것으로 간주됩니다. 빈 문자열도 동일한 결과를 생성합니다. |
preload
속성은 플랫폼마다 서로 다른 영향을 줍니다.
예를 들어 Chrome은 데스크톱에서 25초 길이의 동영상을 버퍼링하지만 iOS 또는 Android에서는 버퍼링하지 않습니다. 즉, 데스크톱에서는 발생하지 않는 재생 시작 시 지연이 모바일에서 발생할 수 있습니다. 자세한 내용은 오디오 및 동영상 미리 로드로 빠른 재생 또는 Steve Souders의 블로그를 참고하세요.
이제 웹페이지에 미디어를 추가하는 방법을 알았으므로 청각 장애가 있거나 오디오를 재생할 수 없는 경우 동영상에 자막을 추가하는 미디어 접근성에 관해 알아보겠습니다.