웹페이지에 미디어 추가

데릭 허먼
데릭 허먼
조 메들리
조 메들리

이 섹션에서는 <video><source> 태그를 사용하여 웹페이지에 미디어 파일을 삽입하는 방법, 청각 장애인을 위한 동영상에 자막을 추가하는 방법, 미디어 프레임워크 사용에 관한 몇 가지 일반적인 개념을 알아봅니다. 또한 미리 로드를 사용하여 재생 시작 속도를 높이는 방법을 알아보고 Kino라는 오프라인 적응형 스트리밍 기능을 사용하여 업데이트된 데모 PWA를 빌드한 방법을 설명합니다.

이 섹션에서는 웹페이지에 삽입할 준비가 된 동영상 파일이 있다고 가정합니다. 카메라에서 다운로드한 .mov 파일은 작동하지 않습니다. 더 이상 필요한 경우 웹용 미디어 파일 준비를 참조한 다음 다시 돌아오세요.

이 섹션에서는 이러한 주제를 다룹니다.

  • <video> 및 <source> 태그에서는 웹페이지에 미디어 파일을 삽입하는 방법을 구체적으로 알아봅니다.
  • 미디어 접근성에서는 청각 장애인을 위한 미디어 파일에 자막을 추가하는 방법을 알아봅니다.
  • 미디어 프레임워크에서는 Shaka Player, JW Player, Video.js와 같은 미디어 프레임워크를 사용하는 방법에 관한 기본사항을 알아봅니다.
  • 오디오 및 동영상 미리 로드로 빠른 재생에서는 리소스를 적극적으로 미리 로드하여 미디어 재생 속도를 높이는 방법을 알아봅니다.
  • 오프라인 스트리밍이 포함된 PWA에서는 프레임워크를 사용하지 않고도 적응형 스트리밍 및 오프라인 재생이 가능한 업데이트된 데모 PWA를 빌드한 방법을 알아봅니다. 또한 소스 코드로 플레이할 수 있습니다.

이 섹션에서는 다룰 내용이 많으므로 먼저 <video> 및 <source> 태그 사용 방법을 알아보세요.