웹페이지에 미디어 추가

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> 태그를 사용하는 방법을 알아보세요.