[HTML]video 요소

목차

video 요소

페이지에 동영상 콘텐츠를 추가할 때 사용되며 사용방법은
video controls autoplay width="512" height="288" src="video/test.mp4"
속성
- controls: 비디오와 오디오 재생을 조정하는 컨트롤을 제공(브라우저에 따라 다름)
- autoplay: 속성명에서도 유추 가능하듯 이 속성 명시할 경우 페이지가 뜨자마자 동영상이 자동 재생됨
- poster: 비디오가 시작되지 않을 경우 포스터 이미지를 보여줄 수 있음, img요소의 alt와 비슷한 역할
- id: 아이디 추가해서 스타일 가미 가능
- src: img요소의 src와 흡사한데, 비디오 파일 원본의 위치가 담긴 url을 설정
- preload: 보통 최적화를 목적으로 비디오를 어떤 식으로 가져올지 제어하는 세밀한 컨트롤에 사용됨
- loop: boolean 속성으로 재생이 끝난 후 비디오를 자동으로 재시작하는 기능을 수행
- width, height: 비디오 재생영역(일명 뷰포트)의 너비와 높이를 결정, poster 속성을 사용하고 있다면 포스터 이미지 크기도 이 너비와 높이에 맞춰짐
비디오 역시 크기가 조정되는데, 영상 비율(4:3 혹은16:9)로 맞춰지므로 좌우 또는 상하에 공간이 생길 것이며, 비디오는 편지함이나 기념품 상자 모양으로 재생 영역 크기에 맞춰질 것임, 최상의 성능과 화질로 보여주길 원하면 비디오의 원본 영역에 맞추길 권장

- source: 브라우저마다 비디오 지원 형식이 다르므로 src속성 하나만으로 모든 브라우저를 다 지원할 수 없음, 각각의 브라우저에서 동영상을 지원하기 위해 각각의 포맷을 설정하는 속성(쉽게 얘기해 미디어를 여러개 설정할 때 사용하는 요소정도로 이해)

참조 url: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

HTML5에서 추가된 form 요소
숫자입력: input type="number"
범위입력: input type="range" min="0" max="5" step="5"
색상입력: input type="color"
날짜입력: input type="date"
이메일입력: input type="email"
전화번호 입력: input type="tel"
url 입력: input type="url"

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

위의 요소들을 데스크톱 브라우저에서는 차이점을 못 느낄지 모르지만, 모바일 브라우저에서는 /나 @처럼 필요한 문자를 쉽게 입력할 수 있는 맞춤형 키보드가 표시된다고 함
모든 브라우저가 이런 입력 유형을 지원하지는 않아서 제대로 보이지 않는 것도 있을 수 있음

form요소의 name 속성 작동방식
클라이언트에서 폼에 데이터 입력 후 전송 => 브라우저는 폼의 데이터와 유일한 이름을 사용하는 name속성을 묶어서 포장 후 서버로 전송
ex) zip이라는 name의 input요소에 우편번호로 10000을 입력 하면, 브라우저는 폼이 전송될 때 zip=10000을 서버로 보냄

출처 : Head First HTML and CSS(개정판)