video와 source, track으로 영상 플레이어를 구성합니다.
controls는 재생 조작을 보여주고 poster는 시작 이미지를 지정합니다. source를 여러 형식으로 두며 track kind=captions로 자막을 제공하면 소리를 듣지 못하는 환경에서도 내용을 이해할 수 있습니다.
source의 sample.mp4는 실제로 없는 파일이라 영상 데이터가 오지 않고, poster로 지정한 어두운 이미지가 계속 플레이어 자리를 채웁니다. 영상 데이터가 없을 때 video의 기본 크기는 poster 그림을 따르므로, CSS의 width: 100%와 height: auto가 그 그림의 16:9 비율로 높이를 잡아 줍니다. type=video/mp4는 파일을 받기 전에 재생 가능 여부를 가늠하는 단서입니다.
자막 파일은 WebVTT 형식으로 만들고, track의 srclang은 자막의 언어를, label은 플레이어 자막 메뉴에 표시될 이름을 정합니다. 스크립트로 재생할 때 video.play()는 Promise를 돌려주고 자동 재생 정책에 걸리면 거부되므로 catch로 실패를 처리합니다. 특정 장면으로 옮기려면 currentTime에 초 단위 값을 넣습니다.
muted 없이 자동 재생을 강제하거나 자막 없이 중요한 정보를 영상에만 담지 마세요.
직접 바꿔보세요poster 주소와 fallback 문구를 바꾸고 track 요소를 추가하세요.