웹에서 이미지·오디오·비디오를 제공하는 공통 원칙을 배웁니다.
미디어는 파일 형식과 브라우저 지원, 용량, 대체 콘텐츠를 함께 고려해야 합니다. source를 여러 개 제공하면 브라우저가 지원하는 형식을 선택할 수 있습니다. 아래 예제는 실제 video·audio·img 요소를 사용하고, 이 요소를 지원하지 않는 브라우저에는 안쪽의 다운로드 링크와 대체 설명이 대신 보입니다.
video와 audio의 preload=metadata는 재생을 누르기 전에는 길이와 크기 같은 정보만 받으라는 힌트라서, 처음에는 poster 이미지가 영상 자리를 채우고 컨트롤에 전체 재생 시간이 표시됩니다. CSS는 video와 img에 width: 100%와 height: auto를 주어 카드 폭에 맞추고, audio에는 max-width: 100%만 주어 기본 길이를 유지하되 카드 밖으로 넘치지 않게 합니다.
source 아래의 p와 다운로드 링크는 video나 audio 요소 자체를 모르는 브라우저를 위한 대체 내용이라, 요소를 지원하는 브라우저는 파일을 받지 못해도 이 내용을 그리지 않습니다. source로 지정한 파일이 모두 실패했는지 알려면 마지막 source 요소에서 발생하는 error 이벤트를 받아 처리합니다.
자동 재생과 큰 파일은 데이터 사용량과 접근성에 영향을 줍니다. 사용자가 제어할 수 있게 하세요.
직접 바꿔보세요비디오 source를 하나 더 추가하고 자막 track이 필요한 이유를 설명하세요.