HTML에서 비디오를 사용하는 방법

<video>의 기본적인 사용 방법

<video src="https://file-examples.com/storage/fe38eaf15f62b8b2ca12757/2020/03/file_example_WEBM_1920_3_7MB.webm" controls
width="300">
  비디오 재생이 되지 않으면 보이는 대체 텍스트입니다.
</video>

---

<source>

브라우저에 따라 지원하는 동영상 지원 형식이 다르므로 그에 맞는 형식의 동영상, 오디오가 필요하다

이를 위해 미디어 컨테이너에는  동영상, 오디오 트랙의 구조에 대한 메타 데이터 정보,

미디어에 대한 메타데이터, 코덱 정보를 가진다.

<video> 내에 다양한 <source> 요소를 넣어두면

브라우저는 지원하는 코덱이 있는 요소를 재생한다.

<video controls width="300">
	<source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1920_18MG.mp4" type="video/mp4">
	<source src="https://file-examples.com/storage/fe38eaf15f62b8b2ca12757/2020/03/file_example_WEBM_1920_3_7MB.webm" type="video/webm">
  비디오 재생이 되지 않으면 보이는 대체 텍스트입니다.
</video>

 

---

속성

• autoplay : 로드되면 바로 재생을 시작
• loop : 끝까지 재생된 후 자동으로 다시 재생
• muted : 초기 사운드 상태를 꺼진 상태로 지정
• poster : 동영상 재생 전 이미지 (썸네일)
• preload : 미리 파일을 불러옴

---

<track>

미디어 요소에 대한 자막 제공

<track default
           kind="captions"
           srclang="en"
           src="subtitles.vtt" />