동영상을 페이지에 넣는 사용하는 태그는 embed, video가 있다.
<embed>는 이제 거의 사용되지 않으며 이미지는 <img> 동영상은 <video>, 음악은 <audio>, html을 표시하려면 <iframe>을 이용한다.
video
비디오 콘텐츠를 포함시키는 데 사용된다.
<video>태그와 </video>태그 사이의 텍스트는 <video> 요소를 지원하지 않는 브라우저에만 표시된다.
HTML
기본 예시
이런식으로 사용할 수 있다.
<video> 태그의 속성
autoplay
:
부울 속성(boolean). 자동 재생. 비디오가 준비되는 즉시 재생을 시작한다.
controls
:
부울 속성(boolean). 컨트롤러 표시. 비디오 컨트롤을 표시한다(예: 재생/일시 중지 버튼).
width
:
너비. 픽셀 단위로 입력한다. 비디오 플레이어의 너비를 설정한다.
height
:
높이. 픽셀 단위로 입력한다. 비디오 플레이어의 높이를 설정한다.
loop
:
부울 속성(boolean). 반복 재생. 비디오 재생이 완료되면 다시 시작한다.
muted
:
부울 속성(boolean). 음소거. 사운드가 들리지 않게 음소거한다.
poster
:
포스터. URL로 입력한다. 비디오 재생 버튼을 누르기전에 표시할 이미지를 지정한다.
preload
:
프리 로드. auto, metadata, none 중 하나 선택하여 입력. 페이지가 로드될 때 비디오를 로드해야 하는지 여부와 로드 방법을 지정한다.
src
:
URL. 비디오 파일의 URL을 입력한다.
source
<video>와 </video> 사이에 <sourch> 태그를 이용하여 비디오 파일의 URL을 추가할 수 있다.
<sourch> 태그가 여러개 있는경우 가장 먼저 입력한 <sourch> 태그가 실행된다.
만약 가장 먼저 입력한 <sourch> 태그의 동영상이 지원되지 않는다면 그 다음 <sourch> 태그로 실행한다.
HTML
기본 예시
track
<video>와 </video> 사이에 <track> 태그를 이용하여 비디오 파일의 텍스트 트랙을 지정한다.
텍스트 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 한다.
HTML
default
사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 설정한다. 하나의 미디어 요소 당 하나의
kind
텍스트 트랙의 종류를 입력한다. kind를 아무것도 입력하지 않으면 subtitles로 간주하고 유효하지 않은 값을 가진 경우 metadata로 간주한다.
특성
captions
:
폐쇄 자막(음소거로 보거나 청각 장애를 가진 시청자에게 적합하다.)을 추가한다.
descriptions
:
영상에 대한 텍스트 설명을 추가한다. 시각 장애를 가진 시청자에게 적합하다.
chapters
:
챕터 타이틀은 미디어 리소스를 탐색할 때 사용한다.
metadata
:
트랙을 스크립트가 사용한다. 사용자에게 보이지 않는다.
label
사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용한다.
src
텍스트 트랙의 URL. 필수 특성. <track>의 부모 <video> 요소에 crossorigin (en-US) 특성이 없다면 문서와 같은 출처여야한다.
srclang
텍스트 트랙의 언어. 유효한 IETF 언어 태그여야 한다. kind 특성이 subtitle인 경우 필수 항목이다.
W3C School - HTML video Tag
W3C School - HTML source Tag
W3C School - HTML track Tag