오디오 및 동영상

이미지 모듈에서 살펴본 것처럼 HTML을 사용하면 웹페이지에 미디어를 삽입할 수 있습니다. 이 섹션에서는 오디오 및 동영상 파일을 삽입하는 방법, 사용자 컨트롤, 동영상의 정적 이미지 자리표시자 제공, 오디오 및 동영상 파일에 액세스할 수 있도록 하는 등 권장사항을 비롯한 오디오 및 동영상 파일을 살펴봅니다.

<audio> 및 <video>

<video> 및 <audio> 요소는 src 속성을 사용하여 미디어 플레이어를 직접 삽입하는 데 사용하거나, 각각 src 파일 제안을 제공하는 일련의 <source> 요소의 컨테이너 요소로 사용할 수 있습니다. <video>를 사용하여 오디오 파일을 삽입할 수 있지만 <audio> 요소를 사용하여 사운드 파일을 삽입하는 것이 좋습니다.

여는 <video> 및 <audio> 태그에는 controls, autoplay, loop, mute, preload, 전역 속성 등 여러 다른 속성이 포함될 수 있습니다. <video> 요소는 height, width, poster 속성도 지원합니다.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

이 <video> 예에는 동영상 소스에 연결되는 src 속성이 있는 단일 소스가 있습니다. poster 속성은 동영상이 로드될 때 표시할 이미지를 제공합니다. 마지막으로 controls 속성은 사용자 동영상 컨트롤을 제공합니다.

대체 콘텐츠는 여는 태그와 닫는 태그 사이에 포함됩니다. 사용자 에이전트가 <video> (또는 <audio>)를 지원하지 않으면 이 콘텐츠가 표시됩니다. 닫는 </video> 태그는 두 태그 사이에 콘텐츠가 없더라도 필요합니다(하지만 항상 대체 콘텐츠가 있어야 합니다).

여는 <video> 또는 <audio> 태그에 src 속성이 포함되지 않은 경우 <source> 요소를 하나 이상 포함합니다. 각 요소에는 미디어 파일에 대한 src 속성이 있습니다. 다음 예에는 열기 태그와 닫기 태그 사이에 세 개의 미디어 파일 옵션, 대체 콘텐츠, 영어 및 프랑스어 자막이 포함되어 있습니다.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

각 <source> 하위 요소에는 리소스를 가리키는 src 속성이 포함되어 있으며 type 속성은 연결된 파일의 미디어 유형을 브라우저에 알립니다. 이렇게 하면 브라우저가 디코딩할 수 없는 미디어 파일을 가져오지 않습니다.

type 속성 내에 리소스가 인코딩되는 방식을 정확하게 지정하는 codecs 매개변수를 포함할 수 있습니다. 코덱을 사용하면 미디어 최적화를 점진적 개선사항 (모든 브라우저에서 지원하지 않는 요소)으로 포함할 수 있습니다. 코덱은 세미콜론으로 미디어 유형과 구분됩니다. 예를 들어 코덱은 WebM 파일에 VP8 동영상과 vorbis 오디오가 포함되어 있음을 나타내는 <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">와 같은 직관적인 구문을 사용하여 작성할 수 있습니다.

코덱은 MP4 인코딩이 고급 동영상 코딩 기본 프로필 레벨 4.2임을 나타내는 <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">와 같이 해독하기 더 어려울 수도 있습니다. 이 구문을 설명하는 것은 이 수업의 범위를 훨씬 벗어납니다. 자세한 내용은 AV1 동영상의 코덱 매개변수를 결정하는 방법에 관한 Jake Archibald의 게시물을 참고하세요.

동영상을 표시할 때 동영상의 첫 번째 프레임이 사용 가능해지면 기본적으로 스틸 샷으로 표시됩니다. 이러한 문제는 제어할 수 있습니다. poster 속성을 사용하면 동영상이 다운로드되는 동안 및 재생될 때까지 이미지의 소스를 표시할 수 있습니다. 동영상이 재생된 후 일시중지되면 포스터가 다시 표시되지 않습니다.

동영상의 가로세로 비율을 정의해야 합니다. 동영상이 로드될 때 포스터와 동영상 간의 크기 차이로 인해 리플로우 및 리페인트가 발생하기 때문입니다.

항상 불리언 controls 속성을 포함합니다. 이렇게 하면 사용자 컨트롤이 표시되어 사용자가 오디오 수준을 제어하고, 오디오를 완전히 음소거하고, 동영상을 전체 화면으로 확대할 수 있습니다. controls를 생략하면 특히 불리언 autoplay 속성이 포함된 경우 좋지 않은 사용자 환경이 만들어집니다. 음소거 상태이고 컨트롤이 표시되어 있더라도 미디어 파일을 자동 재생하는 것은 일반적으로 좋지 않은 사용자 환경이므로 일부 브라우저에서는 불리언 muted 속성이 생략된 경우 autoplay 속성 지시어를 따르지 않습니다.

트랙

오디오와 동영상 모두의 여는 태그와 필수 닫는 태그 사이에 <track> 요소를 하나 이상 포함하여 시간 제한 텍스트 트랙을 지정합니다. 다음 예시에는 영어와 프랑스어로 시간 제한 텍스트 자막을 제공하는 두 개의 <track> 파일이 포함되어 있습니다.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

src 속성에 지정된 트랙 파일은 WebVTT 형식 (.vtt)이어야 합니다. crossorigin 속성이 포함되지 않는 한 파일은 HTML 문서와 동일한 도메인에 있어야 합니다.

트랙 kind 속성에는 subtitles, captions, descriptions, chapters, 기타 metadata의 5가지 열거된 값이 있습니다.

대화 텍스트 변환 및 번역을 위해 srclang 속성과 함께 subtitles를 포함합니다. 각 label 속성의 값은 사용자에게 옵션으로 표시됩니다. 선택한 VTT 옵션의 콘텐츠가 동영상 위에 표시됩니다. 자막의 모양은 ::cue/ ::cue()를 타겟팅하여 스타일을 지정할 수 있습니다.

kind="caption" 값은 음향 효과 및 기타 관련 오디오 정보가 포함된 스크립트 및 번역에 사용해야 합니다. 청각장애가 있는 시청자만을 위한 기능이 아닙니다. 사용자가 헤드폰을 찾을 수 없어 자막을 사용 설정했을 수도 있습니다. 또는 좋아하는 팟캐스트의 마지막 몇 가지 요점을 제대로 이해하지 못해 스크립트를 읽고 이해를 확인하고 싶을 수도 있습니다. 오디오 및 동영상 콘텐츠에 액세스할 수 있는 대체 방법을 마련하는 것은 중요하면서도 편리합니다.

kind="description"는 Google Home이나 Alexa와 같은 화면이 없는 시스템을 사용하거나 시각장애인인 등 동영상을 볼 수 없는 사용자를 위해 동영상의 시각적 콘텐츠를 텍스트로 설명하는 데 사용됩니다.

WebVTT 형식을 사용하여 자막을 제공하면 청각 장애가 있는 사용자가 동영상에 액세스할 수 있습니다. 청력 장애는 사용자가 시끄러운 환경에 있거나, 스피커에 결함이 있거나, 헤드폰이 고장났거나, 청력 손실이 있거나 청각 장애인으로 인식되기 때문에 발생할 수 있습니다. 콘텐츠의 접근성을 높이면 생각보다 많은 사람들에게 도움이 됩니다. 모든 사람에게 도움이 됩니다.

배경 동영상 고려사항

마케팅팀이나 디자인팀에서 사이트에 배경 동영상을 포함하기를 원할 수 있습니다. 일반적으로 이는 컨트롤이 없는 음소거된 자동 재생 연속 재생 동영상을 원한다는 의미입니다. HTML은 다음과 같이 표시될 수 있습니다.

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

배경 동영상에 액세스할 수 없습니다. 사용자에게 재생을 완전히 제어하고 모든 자막에 액세스할 수 있는 권한을 제공하지 않고 배경 동영상을 통해 콘텐츠를 전달해서는 안 됩니다. 이 동영상은 순전히 장식용이므로 none의 ARIA 역할이 포함되어 있으며 대체 콘텐츠는 생략됩니다. 항상 음소거되는 동영상의 실적을 개선하려면 미디어 소스에서 오디오 트랙을 삭제하세요.

동영상이 5초 이하로 재생되는 경우 접근성 가이드라인에 따라 일시중지 메커니즘이 필요하지 않지만 불리언 loop 속성이 있는 항목은 기본적으로 영원히 반복되어 이 5초 또는 기타 시간 제한을 초과합니다. 좋은 사용자 환경을 위해 항상 동영상을 일시중지하는 방법을 포함하세요. controls를 포함하면 가장 쉽게 이 작업을 할 수 있습니다.

맞춤 미디어 컨트롤

브라우저 내장 컨트롤 대신 맞춤 동영상 또는 오디오 컨트롤을 표시하려면 controls 속성을 포함하세요. 그런 다음 JavaScript를 사용하여 맞춤 미디어 컨트롤을 추가하고 controls 속성을 삭제합니다. 예를 들어 오디오 파일의 재생 상태를 전환하는 <button>를 추가할 수 있습니다.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

이 예에는 방문자가 재생 상태와 일시중지 상태 간에 전환할 때 업데이트되는 텍스트가 포함된 dataset 속성이 있는 버튼이 포함되어 있습니다. aria-controls 속성은 버튼으로 제어되는 요소의 id와 함께 포함됩니다. 이 경우 오디오입니다. 오디오를 제어하는 각 버튼에는 이벤트 핸들러가 있습니다.

맞춤 컨트롤을 만들려면 HTMLMediaElement.play() 및 HTMLMediaElement.pause()를 사용합니다. 재생 상태를 전환할 때 버튼의 텍스트도 전환합니다.

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

controls 속성을 포함하면 JavaScript가 실패하더라도 사용자가 오디오 (또는 동영상)를 제어할 수 있습니다. 대체 버튼이 인스턴스화된 후에만 controls 속성을 삭제하세요.

document.querySelector('[aria-controls]').removeAttribute('controls');

사용자가 컨트롤에 액세스할 수 없는 경우(예: 사이트 콘텐츠 뒤에 컨트롤이 숨겨진 백그라운드 동영상) 항상 외부 컨트롤을 포함하세요. 청각 장애인과 시각 장애인을 비롯한 다양한 환경 및 감각적 요구사항을 가진 사용자를 수용하려면 미디어 접근성 요구사항의 기본사항을 이해하는 것이 중요합니다. HTMLMediaElement에 대해 간단히 살펴보았습니다. HTMLMediaElement은 HTMLVideoElement와 HTMLAudioElement가 모두 상속하는 여러 속성, 메서드, 이벤트를 제공하며 HTMLMediaElement 자체의 속성, 메서드, 이벤트도 몇 개 추가합니다. TextTrack API를 비롯한 여러 다른 Media API가 있습니다. Media Capture and Streams 및 MediaDevices API를 사용하여 사용자의 마이크에서 오디오를 녹음하거나 사용자의 화면을 녹화할 수 있습니다. Web Audio API를 사용하면 실시간 및 사전 녹음된 오디오를 조작하고 오디오를 스트리밍, 저장하거나 <audio> 요소로 전송할 수 있습니다.

이해도 확인

오디오 및 동영상에 대한 지식을 테스트해 보세요.