images 모듈에서 배운 것처럼 HTML을 사용하면 웹페이지에 미디어를 삽입할 수 있습니다. 이 섹션에서는 오디오 및 동영상 파일을 삽입하는 방법, 사용자 컨트롤, 동영상에 정적 이미지 자리표시자 제공, 오디오 및 동영상 파일에 액세스 가능하도록 만드는 권장사항 등 오디오 및 동영상 파일을 살펴봅니다.
<audio> 및 <video>
<video> 및 <audio> 요소는 src 속성으로 미디어 플레이어를 직접 삽입하는 데 사용하거나 일련의 <source> 요소의 컨테이너 요소로 사용할 수 있습니다. 각 요소는 src 파일 추천을 제공합니다. <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 속성이 포함되어 있지 않으면 미디어 파일에 각각 src 속성이 있는 <source> 요소를 하나 이상 포함합니다. 다음 예에는 세 가지 미디어 파일 옵션, 대체 콘텐츠, 여는 태그와 닫는 태그 사이에 영어와 프랑스어 자막이 포함되어 있습니다.
<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 동영상의 코덱 매개변수를 결정하는 방법을 설명하는 게시물을 올렸습니다.
동영상을 표시할 때 기본적으로 동영상의 첫 번째 프레임이 사용 가능해지면 스틸샷으로 표시됩니다.
이는 제어할 수 있는 부분입니다. poster 속성을 사용하면 동영상이 다운로드되는 동안과 동영상이 재생될 때까지 이미지 소스를 표시할 수 있습니다. 동영상이 재생된 후 일시중지되면 포스터가 다시 표시되지 않습니다.
동영상이 로드될 때 포스터와 동영상의 크기 차이로 인해 리플로우 및 다시 페인트가 발생하므로 동영상의 가로세로 비율을 정의해야 합니다.
항상 boolean 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 속성에는 5개의 열거된 값(subtitles, captions, descriptions, chapters 및 기타 metadata)이 있습니다.
대화 스크립트 작성 및 번역을 위한 srclang 속성과 함께 subtitles를 포함합니다. 각 label 속성의 값은 사용자에게 옵션으로 표시됩니다. 선택한 VTT 옵션의 콘텐츠가 동영상 위에 표시됩니다. ::cue/ ::cue()를 타겟팅하여 부제목의 스타일을 지정할 수 있습니다.
음향 효과 및 기타 관련 오디오 정보가 포함된 텍스트 변환 및 번역에는 kind="caption" 값을 예약해야 합니다.
청각 장애인 시청자만을 위한 콘텐츠가 아닙니다. 사용자가 헤드폰을 찾지 못해 자막을 사용 설정했을 수 있습니다. 또는 좋아하는 팟캐스트의 마지막 요점을 잘 이해하지 못해 스크립트를 읽고 이해했는지 확인하려고 합니다.
오디오 및 동영상 콘텐츠에 액세스할 수 있는 다른 방법을 마련하는 것이 중요하면서 편리합니다.
kind="description"는 Google Home 또는 Alexa와 같은 화면이 없는 시스템을 사용하거나 시각장애인 등 동영상을 볼 수 없는 사용자를 위해 동영상에서 시각적 콘텐츠에 관한 텍스트 설명에 사용합니다.
WebVTT 형식을 사용하여 자막을 제공하면 청각 장애가 있는 사용자가 동영상을 시청할 수 있습니다. 장애는 개인과 현재 환경 사이의 불일치라는 것을 기억하세요. 청력 손상은 사용자가 시끄러운 환경에 있거나, 스피커에 결함이 있거나, 헤드폰이 고장 나거나, 청력이 약하거나 청각 장애가 있는 경우 발생할 수 있습니다. 콘텐츠에 액세스할 수 있도록 하면 생각보다 많은 사람에게 도움이 되며 모두에게 도움이 됩니다.
백그라운드 동영상 고려사항
마케팅팀 또는 디자인팀이 사이트에 배경 동영상을 포함하기를 원할 수 있습니다. 일반적으로 이는 사용자가 컨트롤 없이 음소거되고 자동재생되는 루프 동영상을 원한다는 의미입니다. HTML은 다음과 같을 수 있습니다.
<video 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 속성을 포함합니다. 그런 다음 자바스크립트를 사용하여 맞춤 미디어 컨트롤을 추가하고 컨트롤 속성을 삭제합니다. 예를 들어 오디오 파일의 재생 상태를 전환하는 <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가 실패하더라도 사용자가 오디오 (또는 동영상)를 제어할 수 있습니다.
교체 버튼이 인스턴스화된 후에만 컨트롤 속성을 삭제합니다.
document.querySelector('[aria-controls]').removeAttribute('controls');
사이트 콘텐츠 뒤에 컨트롤이 숨겨진 백그라운드 동영상과 같이 사용자가 컨트롤에 액세스할 수 없는 경우에는 항상 외부 컨트롤을 포함하세요. 청각 손실과 시각 장애가 있는 수백만 명의 사용자를 비롯하여 다양한 환경 및 감각 니즈가 있는 사용자를 수용하려면 미디어 접근성 요구사항의 기본사항을 이해하는 것이 중요합니다.
지금까지 HTMLVideoElement 및 HTMLAudioElement에서 모두 상속받은 여러 속성, 메서드, 이벤트를 제공하는 HTMLMediaElement에 관해 알아봤습니다. HTMLMediaElement는 자체의 몇 가지 속성, 메서드, 이벤트를 추가합니다. TextTrack API를 비롯한 여러 다른 Media API가 있습니다. Media Capture and Streams와 MediaDevices API를 사용하여 사용자의 마이크에서 오디오를 녹음하거나 사용자의 화면을 녹음할 수 있습니다. Web Audio API를 사용하면 실시간 및 사전 녹음된 오디오를 조작하고 오디오를 스트리밍, 저장 또는 <audio> 요소로 전송할 수 있습니다.
학습 내용 확인하기
오디오 및 동영상에 대한 지식을 테스트합니다.
<track> 요소는 어디에 사용되나요?
poster 속성은 무엇을 제어하나요?