06 HTML 동영상관련 태그 (1)

video 태그

< 나만의 홈페이지 만들기 >

 06 HTML 동영상관련 태그 (1) 

안녕하세요

연구쟁이 입니다. 

지난 포스팅에서 HTML 이미지 태그에 관련해서 알아보았는데요. 

이미지를 삽입하고, 삽입한 이미지에 링크를 걸고, 또 이미지 특정 부분에 링크를 거는 이미지 맵 까지 말이죠. 

이번에는 동영상 태그에 대해서 정리 해볼까 해요. 

동영상 삽입하고 유튜브 동영상을 가지고 오는 것과 관련된 태그들이죠. 

 video 태그

<video width="너비" height="높이" />

     <source src="파일경로" type="파일형태" >

</video>

내가 가지고 있는 동영상 파일을 직접 올릴 경우 video 라는 태그를 사용하면 돼요. 

기본은 동영상의 크기 지정과 파일 경로와 타입을 적으면 되고요. 그 외에 필요에 따라서 다양한 속성들을 추가 해주면 돼요. 

autoplay: 비디오 자동 재생

loop: 반복 재생

controls: 비디오 제어기기 표시(볼륨, 재생 버튼)

muted: 음소거 

poster: 처음에 표기될 이미지 URL

이외에도 다른 속성들이 있지만, 주로 사용하는 속성들만 알면 된다고 생각해서 나머지는 생략해요. 

그럼 한번 실제로 해볼까요.

먼저 동영상 파일이 필요해서 전 유튜브에서 다운 받았어요. 

참고로 유투브에서 동영상 다운 받는 방법은 

먼저 원하는 동영상을 선택해요.

전 드라마를 좋아해서 <위대한 유혹자> 드라마 영상을 선택했어요. ㅎㅎ 개인적으로 많은 아쉬움이 큰 드라마지만...

우도환 때문에 팬심으로 보고 있죠. ㅎㅎ 

https://www.youtube.com/watch?v=L_OWLO7lGxM  

위 주소창의 youtube앞에 ss를 붙여줍니다. 

  https://www.ssyoutube.com/watch?v=L_OWLO7lGxM  

그러면 다운로드가 가능한 페이지로 넘어가요. 요렇게...

그리고 하단에 파란색으로 download video in browser 를 클릭!

그러면 아래에 다운로드 파일이 짠~~나와요. ㅎㅎ 쉽죠? 

그럼 동영상도 다운 받았으니, video태그를 사용해서 코딩을 해볼까요. 

동영상을 로드 되면 바로 재생되면서 반복되도록 해볼게요.

결과 화면은....

하지만 자동 무한 재생이므로 동영상에 대한 컨트롤은 할 수가 없어요. 

페이지를 닫지 않는 한 계속 나오죠~ ㅎㅎ 

그래서 이번엔 로드 되면 동영상이 재생되는 것이 아니라, 메인 이미지가 나오고 밑에 컨트롤 박스가 나와서 재생 버튼을 눌려야 동영상이 나오도록 해볼게요. 

결과 화면은..

크게 어려운 건 없죠?

이렇게 <video> 태그는 기본적인 속성만 알면 자신이 원하는 대로 동영상 삽입이 가능하죠. 

음소거를 하고 자동 무한 재생을 해서 메인 배경으로 동영상을 깔기도 하고, 

동영상 재생 버튼을 클릭해야만 동영상이 나오게 하기도 하고...

동영상을 삽입하는 방법에는 <video> 태그 말고 <embed>라는 태그를 사용하기도 하는데요. 

이 방법에 대해서는 다음 포스팅으로 넘길게요. 

이것도 알면 간단하지만, 내용을 설명해 주기엔... 정리할게 좀 있어서 말이죠. 

그럼 오늘도 열공하세요.