다양한 움짤 동영상 태그(HTML 비디오 태그)

블로그나 카페등 웹페이지에 글을 올리려면 거의 기본적인 베이스가 HTML로 이루어진 문장들입니다. 이 문장들을 어떻게 조합 하느냐에 따라 이미지가 될수도 있고 동영상 링크를 할 수도 있고 그러합니다. 앞서 우린 동영상을 올릴때 쓰는 여러가지 동영상태그들(비디오 태그)을 알아보겠습니다. 

여러가지 <video> 태그들

 

쉽게 설명하기 위해 표로 정리해보았습니다. 이표에는 많이 쓰는 순서대로 집어 넣었습니다.

사실 비디오 태그에서 중요한건 재생 될 동영상의 경로 지정과(src) 컨트롤 버튼(controls), 그리고 동영상의 크기(width, height)입니다.
물론 반복재생, 자동재생, 음소거 등등이 있겠지만 전 위의 것이 더 중요하다고 생각합니다.

속성명	예시	설명
src="비디오주소"	<video src="http://동영상.mp4">	재생 될 동영상의 주소를 입력하는 곳 입니다.
controls	<video controls>	재생되는 동영상의 재생바, 일시정지 버튼, 음소거 버튼등 UI를 추가 시키는 것 입니다.
width="픽셀"	<video width="640">	동영상의 너비를 지정해 주는 것 입니다. 지정해준 픽셀 수 만큼의 너비를 갖습니다. <video width="100%">로 할시, 페이지 너비 만큼 자동으로 변경됨(반응형에 좋음)
height="픽셀"	<video height="480">	동영상의 높이를 지정해 주는 것 입니다. 지정해준 픽셀 수 만큼의 높이를 갖습니다. <video height="100%">로 할시, 동영상 높이 만큼 자동으로 변경됨(반응형에 좋음)
loop=1	<video loop=1>	반복재생을 하게해주는 태그, (=1은 참이란 뜻으로 그에 반대는 =0)
autoplay=1	<video autoplay=1>	자동재생을 하게해주는 태그, (=1은 참이란 뜻으로 그에 반대는 =0)
muted	<video muted>	동영상의 음소거를 담당하는 태그이며 사용할시 음소거로 재생된다.

위의 표로 예시와 설명을 알아보았는데 저것만 보고 이해하기 힘들 수도 있을 겁니다.
가장 이해가 잘되는 실제 사용예시를 보면서 해봅시다.

---

 사용 예시

예시를 설명하기에 앞서, src와 width,height는 기본적인 것들이니 코드 내에 기본은로 포함시키겠습니다.
루프와 오토플레이, 뮤트 순으로 하겠습니다.

1. loop사용 예제

<video src="https://thumbs.gfycat.com/AcademicInferiorHamster-mobile.mp4"controls="controls" width="100%" height="100%" loop=1 ></video>

(위의 태그를 HTML로 적용시킨 모습.)
영상을 재생시켜보면 재생하고 무한 반복 되는 것을 볼 수 있다.

2. autoplay 예제

<video src="https://thumbs.gfycat.com/MadForcefulGarpike-mobile.mp4" controls width="100%" height="100%" autoplay=1></video>

 

 

페이지를 새로고침 할때마다 자동으로 재생된다.
위의 loop와 같이 쓴다면
이러한 결과물이 나올 것 이다.

 

(자동 재생 + 무한 반복 마치 gif를 보는듯하다.)

<video src="https://thumbs.gfycat.com/TiredAstonishingEelelephant-mobile.mp4" autoplay=1 loop=1 controls width="100%" height="100%"></video>

3. muted 예시

<video src="https://thumbs.gfycat.com/AcademicInferiorHamster-mobile.mp4" muted controls width="100%" height="100%"></video>

 

위에서 소리가 나왔었지만 지금은 음소거가 되어 나온다.(muted 태그)

---

마치며...

큰용량을 차지하는 동영상을 다른사이트에 올려두고 이렇게 태그를 이용해 첨부하는게 나름 괜찮은 방법같습니다. 하지만 HTML 태그를 잘 모를시 어려움이 있는데 이 글을 보고 도움이 되었으면 좋겠습니다. 
오늘도 좋은 하루 되세요. 이상입니다.

이글의 저작권은 규르숭에게 있습니다.