본문 바로가기

Front/HTML

[HTML] HTML <video> 동영상올리기, video태그와 속성

728x90

<video>

<video> 태그는 동영상을 삽입할 수 있는 태그로 source태그와 src속성을 이용하여 좌표를 지정해준다.

<video>
  <source src="비디오 좌표"/>
</video>

이미지 태그와 같은 방식으로도 표현할 수 있다.

<video controls src="https://www.w3schools.com/html/mov_bbb.mp4"/>

 

비디오 태그에 사용하는 속성

  • src : 비디오 파일의 주소
  • controls : 컨트롤러 표시
  • autoplay : 자동 재생
  • loop : 반복 재생
  • muted : 음소거
  • poster : 영상의 첫화면 이미지로 표시할 사진 지정 (썸네일 지정) 
poster 사용법

<video poster="URL">

 

예제

 

<예제코드>

<video controls loop muted poster="https://img.huffingtonpost.com/asset/5d706d18240000ba027556ee.jpeg?ops=1200_630">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>