[HTML] Video 태그

video 태그 간단 정리

• img 태그와 유사하지만, 빈태그가 아니라는 점이 차이다. video 태그는 콘텐츠로 비디오 태그 로딩에 실패했을 때 보여줄 메시지를 적어줄 수 있다(이미지 태그의 alt 속성이 비디오 태그에서는 콘텐츠에 적혀진 다는 생각)
• 이미지 태그와 달리 src 속성이 필수가 아니다. 대신 video 태그의 자식 요소로 source 태그를 적어서 그 source 태그의 속성으로 경로를 줘야한다.
• controls 속성을 적어주면 컨트롤 패널이 나온다(default는 False)
• autoplay 속성을 적어주면 자동으로 플레이되는데, 이 때, muted 속성이 안적혀있으면 새로고침 시에는 자동으로 플레이되지 않는다. 이는 브라우저가 소리가 있는 영상을 초기 진입시에 자동으로 틀게 되면 유저에게 안좋은 영향을 미칠 것을 대비해 막아놓은 것이다. 그러나, muted 속성과 함께 주면 새로고침시에도 자동재생된다.
• poster 속성으로 이미지 파일 경로를 써주면, 기본 썸네일이 비디오의 첫장면이 아닌 세팅해놓은 이미지로 된다.
• loop 속성을 주면 영상이 끝나도 자동으로 반복된다.
• 이미지 태그와 같이 width, height 속성을 줄 수 있다.