코딩의 즐거움/HTML

[ 코딩 19 ] html 비디오 태그 알아보기

COMIZLE 2020. 11. 4. 17:56

 

[ 코딩 19 ] html 비디오 태그 알아보기

 

 

 

 

 

<video>

<source src="경로/동영상명.mp4" type="video/mp4">

</video>

 

 

동영상을 추가하고 싶으면, 

video 태그를 적어주면 된다. 

 

 

src 는 비디오 파일의 주소를 적어주면 된다. 경로는 해당 폴더명을 적어주면 된다.

 

 

video 태그의 poster는 비디오를 재생하기 전의 썸네일이미지를 추가해 준다. 

 

 

 

그외 video 태그의 속성들

  

   

 

<video width="값" height="값">

<source src="경로/동영상명.mp4" type="video./mp4">

</video>

 

 

 

width와 height 속성으로 동영상의 너비와 높이를 조절할 수 있다. 

 

 

 

 

 

 

 

<video autoplay controls>

<source src="경로/비디오명.mp4" type="video.mp4">

<vidoe>

 

 

autoplay -> 자동 재생

 

controls -> 컨트롤 막대라고 해서 

이미지에보면 점선으로 표시해둔 부분이 컨트롤 막대다. 

 

 

재생, 음량조절, 다음 영상으로 이동 등이 컨트롤 막대에 나타난다. 

 

 

 

 

 

 

<video loop>

<source src="경로/비디오명.wepm" type="video.wepm">

</video>

 

 

loop - 동영상을 반복 재생해 준다.

 

 

 

마무리 속성 정리