오디오 및 동영상

이미지 모듈에서 배운 것처럼 HTML을 사용하면 웹페이지에 미디어를 삽입할 수 있습니다. 이 섹션에서는 YouTube는 삽입 방법, 사용자 컨트롤, 동영상에 대한 정적 이미지 자리표시자 제공, 오디오 및 동영상 파일의 접근성을 높이는 법을 설명합니다.

<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 속성이 포함되어 있지 않으면 <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 매개변수를 포함할 수 있습니다. 이는 리소스가 인코딩되는 방법을 정확하게 지정합니다. 코덱을 사용하면 아직 지원되지 않는 미디어 최적화를 포함할 수 있습니다. 를 사용할 수 있습니다. 코덱은 세미콜론을 사용하여 미디어 유형과 구분됩니다. 예를 들어, 코덱은 직관적인 문법입니다. 예를 들어 <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">는 WebM 파일에는 VP8 동영상 및 vorbis 오디오가 포함됩니다. 또한 <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">와 같은 코덱은 해독하기 더 어려울 수 있습니다. 이는 MP4 인코딩이 Advanced Video Coding Main Profile Level 4.2임을 나타냅니다. 이 문법에 대한 설명은 살펴보겠습니다 제이크 아치볼드에게 AV1 동영상의 코덱 매개변수를 결정하는 방법을 설명하는 게시물이 있습니다. 를 참조하세요.

동영상을 표시할 때 기본적으로 동영상의 첫 번째 프레임은 사용이 가능해지면 스틸 샷으로 표시됩니다. 이는 제어할 수 있는 부분입니다. 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)이어야 합니다. 파일은 HTML 문서와 동일한 도메인에 있어야 합니다(crossorigin. 속성이 포함됩니다.

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

대화 스크립트 작성 및 번역을 위해 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>

백그라운드 동영상에는 액세스할 수 없습니다. 사용자에게 완전한 정보를 제공하지 않고 백그라운드 동영상을 통해 콘텐츠를 전달해서는 안 됩니다. 모든 자막에 대한 액세스와 재생도 제어할 수 있습니다. 이 동영상은 완전히 장식용이므로 ARIA 역할을 포함합니다. none로 변경되고 대체 콘텐츠는 생략됩니다. 항상 음소거된 동영상의 성능을 개선하려면 미디어 소스에서 오디오 트랙을 삭제하세요.

동영상이 5초 이하로 재생되는 경우, 접근성 가이드라인에서는 일시중지 메커니즘을 요구하지는 않지만 불리언 loop 속성이 있는 경우 기본적으로 영원히 반복되며 이 5초 또는 기타 시간 제한을 초과합니다. 선한 영향력 동영상을 일시중지하는 방법을 포함해야 합니다. controls를 포함하면 가장 쉽습니다.

맞춤 미디어 컨트롤

브라우저에 내장된 컨트롤이 아닌 맞춤 동영상 또는 오디오 컨트롤을 표시하려면 controls 속성을 포함합니다. 그런 다음 맞춤 미디어 컨트롤을 추가하고 컨트롤 속성을 삭제하는 JavaScript 예를 들어 <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');

컨트롤이 숨겨진 백그라운드 동영상과 같이 사용자가 컨트롤에 액세스할 수 없는 경우 항상 외부 컨트롤을 포함합니다. 배후에 있습니다. 미디어 접근성 요구사항이 있는 사용자를 위해 미디어 접근성 요구사항의 기본사항을 이해하는 것이 중요합니다. 환경에도 영향을 미칠 수 있습니다. HTMLMediaElement에 관해서도 알아봤습니다. 이 클래스는 HTMLVideoElement 및 HTMLAudioElement: HTMLMediaElement 몇 가지 속성 추가 메서드 및 자체 이벤트가 포함됩니다. 여러 개의 다른 Media API도 있습니다. (TextTrack API 포함) 미디어 캡처 및 스트림 및 MediaDevices API를 사용하여 사용자 마이크에서 오디오를 녹음합니다. 사용자의 화면을 녹화할 수 있습니다. Web Audio API 를 사용하면 실시간 및 사전 녹음된 오디오를 조작하여 오디오를 스트리밍하거나 저장하거나 <audio> 요소로 전송할 수 있습니다.

이해도 확인

오디오 및 동영상에 관한 지식을 테스트합니다.