비디오와 오디오 콘텐츠

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

목표	웹페이지에 동영상 및 오디오 콘텐츠를 삽입하고 동영상에 캡션/자막을 추가하는 방법을 학습합니다.

웹 상의 비디오와 오디오

온라인에서 비디오와 오디오는 플래시와 실버라이트 같은 독점 플러그인 기술을 통해 가능했습니다. 둘다 접근성 문제가 있었고 현재는 네이티브 HTML 솔루션인 <video>와 <audio> 요소와 JavaScript API로 대체되었습니다.

🦋 YouTube, 데일리모션, 비메오와 같은 온라인 동영상 제공업체와 사운드클라우드와 같은 온라인 오디오 제공업체가 꽤 많이 있다는 사실도 알아두어야 합니다. 이러한 업체는 동영상을 호스팅하고 소비할 수 있는 편리하고 쉬운 방법을 제공하므로 막대한 대역폭 소비에 대해 걱정할 필요가 없습니다.

`<video>` 요소

<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>

src

삽입하려는 동영상의 경로

controls

사용자가 비디오 및 오디오 재생을 제어할 수 있어야 합니다(특히 뇌전증 환자에게 중요합니다.)

controls 속성을 사용하여 브라우저의 자체 제어 인터페이스를 포함하거나 적절한 JavaScript API를 사용하여 인터페이스를 구축해야 합니다.

최소한 인터페이스에는 미디어를 시작 및 중지하고 볼륨을 조절하는 방법이 포함되어야 합니다.

<video> 태그 내부의 paragraph(<p>)

이를 대체 콘텐츠라고 하며, 페이지에 액세스하는 브라우저가 <video> 요소를 지원하지 않는 경우 표시되어 구형 브라우저를 위한 대체 콘텐츠를 제공할 수 있습니다.

이 경우 동영상 파일에 대한 직접 링크를 제공하므로 사용자는 어떤 브라우저를 사용하든 최소한 어떤 방식으로든 동영상에 액세스할 수 있습니다.

여러 소스 형식을 사용하여 호환성 개선하기

위의 예시에는 문제가 있습니다. 브라우저마다 서로 다른 동영상(및 오디오) 형식을 지원하기 때문에 동영상이 재생되지 않을 수 있습니다. 다행히도 이러한 문제를 방지하기 위해 할 수 있는 방법이 있습니다.

미디어 파일의 콘텐츠

먼저 용어를 간단히 살펴봅시다. MP3, MP4, WebM과 같은 형식을 컨테이너 형식이라고 합니다. 컨테이너 형식은 미디어를 구성하는 오디오 및/또는 비디오 트랙이 저장되는 구조와 미디어를 설명하는 메타데이터, 채널을 인코딩하는 데 사용되는 코덱 등을 정의합니다.

메인 비디오 트랙과 대체 앵글 트랙이 하나씩 있고 영어 및 스페인어 오디오와 영어 해설 트랙의 오디오가 포함된 동영상이 포함된 WebM 파일은 아래 다이어그램과 같이 개념화할 수 있습니다. 또한 장편 영화에 대한 자막, 영화에 대한 스페인어 자막, 해설에 대한 영어 자막이 포함된 텍스트 트랙도 포함됩니다.

[[이미지 ]]

컨테이너 내의 오디오 및 비디오 트랙에는 해당 미디어를 인코딩하는 데 사용되는 코덱에 적합한 형식의 데이터가 저장됩니다. 오디오 트랙과 비디오 트랙에는 서로 다른 포맷이 사용됩니다. 각 오디오 트랙은 오디오 코덱을 사용하여 인코딩되는 반면, 비디오 트랙은 비디오 코덱을 사용하여 인코딩됩니다.

예를 들어

WebM 컨테이너는 일반적으로 Vorbis 또는 Opus 오디오를 VP8/VP9 비디오와 함께 패키징합니다. 이는 모든 최신 브라우저에서 지원되지만 이전 버전에서는 작동하지 않을 수 있습니다.
MP4 컨테이너는 AAC 또는 MP3 오디오를 H.264 비디오와 함께 패키징하는 경우가 많습니다. 이 역시 모든 최신 브라우저에서 지원됩니다.
Ogg 컨테이너는 Vorbis 오디오와 Theora 비디오를 사용하는 경향이 있습니다. 이는 Firefox와 Chrome에서 가장 잘 지원되지만 기본적으로 더 나은 품질의 WebM 형식으로 대체되었습니다.

몇 가지 특별한 경우가 있습니다. 예를 들어, 일부 유형의 오디오의 경우 코덱의 데이터가 컨테이너 없이 또는 간소화된 컨테이너로 저장되는 경우가 많습니다. 이러한 경우 중 하나는 FLAC 코덱인데, 이 코덱은 원시 FLAC 트랙인 FLAC 파일에 가장 일반적으로 저장됩니다.

또 다른 상황은 항상 인기 있는 MP3 파일입니다. "MP3 파일"은 실제로 MPEG 또는 MPEG-2 컨테이너에 저장된 MP3-1 오디오 레이어 III(MP3) 오디오 트랙입니다. 대부분의 브라우저는 <video> 및 <audio> 요소에서 MPEG 미디어 사용을 지원하지 않지만, MP3의 인기로 인해 여전히 MP3를 지원할 수 있기 때문에 이 점이 특히 흥미롭습니다.

오디오 플레이어는 MP3나 Ogg 파일과 같은 오디오 트랙을 직접 재생하는 경향이 있습니다. 이러한 파일에는 컨테이너가 필요하지 않습니다.

🦋 MP3 및 MP4/H.264와 같이 널리 사용되는 몇몇 포맷은 뛰어난 성능을 제공하지만 특허에 의해 방해받고 있습니다. 즉, 해당 포맷의 기반이 되는 기술의 일부 또는 전체에 대한 특허가 존재합니다. 미국에서는 2017년까지 MP3에 대한 특허가 적용되었으며, H.264는 최소 2027년까지 특허에 묶여 있습니다.
이러한 특허로 인해 해당 코덱을 지원하고자 하는 브라우저는 일반적으로 막대한 라이선스 비용을 지불해야 합니다. 또한 일부 사람들은 제한된 소프트웨어를 피하고 개방형 형식만 사용하는 것을 선호합니다. 이러한 법적 및 우선적 이유로 인해 웹 개발자는 전체 잠재 고객을 확보하기 위해 여러 형식을 지원해야 하는 상황에 직면하게 됩니다.

이러한 특허로 인해 해당 코덱을 지원하고자 하는 브라우저는 일반적으로 막대한 라이선스 비용을 지불해야 합니다. 또한 일부 사람들은 제한된 소프트웨어를 피하고 개방형 형식만 사용하는 것을 선호합니다. 이러한 법적 및 우선적 이유로 인해 웹 개발자는 전체 잠재 고객을 확보하기 위해 여러 형식을 지원해야 하는 상황에 직면하게 됩니다.

이전 섹션에서 설명한 코덱은 원시 오디오와 비디오가 모두 매우 크기 때문에 비디오와 오디오를 관리 가능한 파일로 압축하기 위해 존재합니다. 각 웹 브라우저는 압축된 오디오 및 비디오를 바이너리 데이터로 변환하는 데 사용되는 Vorbis 또는 H.264와 같은 다양한 코덱을 지원합니다. 각 코덱은 고유한 장단점을 제공하며, 각 컨테이너는 어떤 코덱을 사용할지 결정하는 데 영향을 미치는 고유한 장점과 단점을 제공할 수도 있습니다.

브라우저마다 서로 다른 컨테이너 파일 형식을 지원할 뿐만 아니라 각각 다른 코덱을 지원하기 때문에 상황은 조금 더 복잡해집니다. 웹사이트나 앱이 사용자의 브라우저에서 작동할 가능성을 극대화하려면 사용하는 각 미디어 파일을 여러 형식으로 제공해야 할 수 있습니다. 사이트와 사용자의 브라우저가 공통 미디어 형식을 공유하지 않으면 미디어가 재생되지 않습니다.

앱의 미디어가 도달하려는 모든 브라우저, 플랫폼 및 디바이스 조합에서 표시되도록 해야 하는 복잡성으로 인해 코덱과 컨테이너의 최상의 조합을 선택하는 것은 복잡한 작업이 될 수 있습니다. 필요에 가장 적합한 컨테이너 파일 형식을 선택하는 데 도움이 필요하면 올바른 컨테이너 선택하기를 참조하고, 콘텐츠와 타겟 오디언스에 사용할 첫 번째 미디어 코덱을 선택하는 데 도움이 필요하면 비디오 코덱 선택하기 및 오디오 코덱 선택하기를 참조하세요.

한 가지 더 염두에 두어야 할 사항은 모바일 브라우저는 데스크톱 버전과 동일한 형식을 모두 지원하지 않는 것과 마찬가지로 데스크톱 버전에서 지원하지 않는 추가 형식을 지원할 수 있다는 점입니다. 또한 데스크톱과 모바일 브라우저 모두 미디어 재생 처리를 오프로드(모든 미디어 또는 내부적으로 처리할 수 없는 특정 유형에 대해서만)하도록 설계될 수 있습니다. 즉, 미디어 지원은 사용자가 설치한 소프트웨어에 따라 부분적으로 달라질 수 있습니다.

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

여기서는 실제 <video> 태그에서 src 속성을 제거하고 대신 자체 소스를 가리키는 별도의 <source> 요소를 포함했습니다. 이 경우 브라우저는 <source> 요소를 살펴보고 지원할 코덱이 있는 첫 번째 요소를 재생합니다. WebM 및 MP4 소스를 포함하면 요즘 대부분의 플랫폼과 브라우저에서 동영상을 재생하기에 충분합니다.

각 <source> 요소에는 type 속성도 있습니다. 이 속성은 선택 사항이지만 포함하는 것이 좋습니다. type 속성에는 <source>에 지정된 파일의 MIME type이 포함되며, 브라우저는 이 type을 사용하여 이해하지 못하는 동영상을 즉시 건너뛸 수 있습니다. type이 포함되지 않으면 브라우저는 작동하는 파일을 찾을 때까지 각 파일을 로드하고 재생하려고 시도하므로 시간이 걸리고 불필요한 리소스 사용이 발생합니다.

참고 : guide to media types and formats (opens in a new tab)

기타 `<video>` 기능

width, height 이 attribute 또는 CSS를 사용하여 동영상 크기를 제어할 수 있습니다. 두 경우 모두 동영상은 가로 세로 비율이라고 하는 기본 너비-높이 비율을 유지합니다. 설정한 크기로 가로 세로 비율이 유지되지 않으면 동영상이 가로로 공간을 채우도록 커지고 채워지지 않은 공간에는 기본적으로 단색 배경색이 지정됩니다.
autoplay 페이지의 나머지 부분이 로드되는 동안 오디오 또는 비디오가 즉시 재생되도록 합니다. 사용자가 매우 짜증스러워할 수 있으므로 사이트에서 자동 재생 동영상(또는 오디오)을 사용하지 않는 것이 좋습니다.
loop 비디오(또는 오디오)가 완료될 때마다 다시 재생을 시작하도록 합니다. 이 역시 성가실 수 있으므로 꼭 필요한 경우에만 사용하세요.
muted 미디어가 기본적으로 사운드가 꺼진 상태로 재생되도록 합니다.
poster 동영상이 재생되기 전에 표시되는 이미지의 URL입니다. 스플래시 화면이나 광고 화면에 사용하기 위한 것입니다.
preload 대용량 파일을 버퍼링하는 데 사용되며 세 가지 값 중 하나를 사용할 수 있습니다:
- "none"은 파일을 버퍼링하지 않습니다.
- "auto"은 미디어 파일을 버퍼링합니다.
- "metadata"는 파일의 메타데이터만 버퍼링합니다.

`<audio>` 요소

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

<audio> 요소는 width/height, poster 속성을 지원하지 않습니다. 다시 말해, 시각적 요소가 없습니다.

동영상 텍스트 트랙 표시하기

이제 알아두면 유용한 약간 더 고급 개념에 대해 설명하겠습니다. 많은 사람들이 적어도 특정 시간에는 웹에서 찾은 오디오/비디오 콘텐츠를 들을 수 없거나 듣고 싶어하지 않습니다. 예를 들어

청각 장애(난청, 청각 장애 등)가 있어 오디오를 전혀 듣지 못하는 사람이 많습니다. 시끄러운 환경(예: 스포츠 경기가 상영될 때 붐비는 술집 등)에 있는 경우 오디오를 듣지 못할 수도 있습니다. 마찬가지로 오디오가 재생되는 것이 방해가 될 수 있는 환경(예: 도서관이나 파트너가 잠을 자려고 할 때)에서는 캡션이 매우 유용할 수 있습니다. 동영상 언어를 모르는 사람들은 미디어 콘텐츠를 이해하는 데 도움이 되는 텍스트 대본이나 번역을 원할 수도 있습니다. 이러한 사람들에게 오디오/비디오에서 말하는 단어의 대본을 제공할 수 있다면 좋지 않을까요? HTML 비디오 덕분에 가능합니다. 이를 위해 WebVTT 파일 형식과 <track> 요소를 사용합니다.

🦋 "transcription"은 "음성 단어를 텍스트로 기록하다"라는 의미입니다. 결과 텍스트는 "transcript"입니다.

WebVTT는 여러 개의 텍스트 문자열과 함께 각 텍스트 문자열이 표시되어야 하는 동영상 내 시간, 제한된 스타일/위치 정보 등의 메타데이터를 포함하는 텍스트 파일을 작성하기 위한 형식입니다. 이러한 텍스트 문자열을 단서라고 하며, 다양한 용도로 사용되는 여러 종류의 단서가 있습니다. 가장 일반적인 단서는 다음과 같습니다:

subtitles : 오디오에서 말하는 단어를 이해하지 못하는 사람들을 위한 외국어 번역.
captions : 오디오를 들을 수 없는 사람들이 무슨 일이 일어나고 있는지 이해할 수 있도록 대화 또는 중요한 소리에 대한 설명을 동기화된 트랜스크립션으로 제공합니다.
timed descriptions : 시각 장애가 있는 사용자에게 중요한 시각적 요소를 설명하기 위해 미디어 플레이어가 말해야 하는 텍스트입니다.

이와 같은 WebVTT 파일이 있습니다.

WEBVTT
 
1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.
 
2
00:00:30.739 --> 00:00:34.074
This is the second.
 
…

HTML 미디어 재생과 함께 표시하려면 다음과 같이 해야 합니다:

.vtt 파일로 적절한 위치에 저장합니다.
<track> 요소를 사용하여 .vtt 파일에 링크합니다. <track>은 <audio> 또는 <video> 내에 배치하되, 모든 <source> 요소 뒤에 배치해야 합니다. kind 속성을 사용하여 subtitles, captions, descriptions 중 하나를 지정합니다. 또한 srclang을 사용하여 자막을 어떤 언어로 작성했는지 브라우저에 알려줍니다. 마지막으로 label을 추가하여 독자가 검색 중인 언어를 식별할 수 있도록 합니다.

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

🦋 검색 엔진은 특히 텍스트를 잘 활용하므로 텍스트 트랙은 SEO에도 도움이 됩니다. 텍스트 트랙을 사용하면 검색 엔진이 동영상 중간 중간에 특정 지점으로 직접 연결할 수도 있습니다.

HTML의 이미지 <object> 로부터 <iframe>까지 — 기타 임베딩 기술