웹페이지에 미디어 추가

Derek Herman
Derek Herman
Joe Medley
Joe Medley

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

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

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

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

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