웹서핑을 하다보면 인덱스 배경에 전면 동영상이 들어가는 멋진 사이트들을 볼 수 있습니다.
오늘은 HTML5로 웹페이지에 동영상 배경을 넣는 방법을 포스팅하겠습니다.
웹페이지에 동영상 배경을 구현하는 방법은 많은 길이 있지만 그냥 가장 쉬운 방법으로 HTML5의 <video> 코드를 사용해보겠습니다.
우리에게 친숙한 브라우저(익스플로러, 크롬, 안드로이드 모바일) 에서 지원하는 비디오파일 형식은 mp4 입니다.
<head> 안에 아래의 코드를 넣어줍니다.
<style> #videobcg { position: absolute; top: 0px; left: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } </style> |
"min-width"와 "min-height"로 동영상의 크기를 지정할 수 있으나, 브라우저 화면에 꽉 채워야 하므로 100%의 값을 주었습니다.
<body> 안에 아래의 코드를 넣어줍니다.
<video id="videobcg" preload="auto" autoplay="true" loop="loop" volume="5"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> |
autoplay : 웹페이지에 동영상 배경을 자동으로 재생.몇몇 중요한 속성별 설명은 다음과 같습니다.
loop : 자동으로 반복 재생
추가적으로 아래와 같이 controls 를 추가하면 동영상 하단에 재생, 정지, 볼륨조절을 할 수 있는 재생 도구가 보여지게 됩니다.(마우스 오버 시)
<video id="videobcg" preload="auto" autoplay="true" loop="loop" volume="5" controls="controls">
autoplay 나 loop 를 추가하지 않을 경우 controls 를 넣어주는 것이 좋겠죠.
아래와 같이 muted 속성을 추가하면 사운드를 끈 상태에서 영상을 재생할 수 있습니다.
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted">
"video.mp4", "video.webm"은 재생할 영상의 파일명입니다.
웹페이지에 동영상 배경을 넣기 위한 비디오파일 확장자에 따른 지원가능한 브라우저는 아래와 같습니다.
mp4 : 익스플로러 9이상, 크롬, 안드로이드 자체 브라우저
webm : 파이어폭스, 오페라
mp4 파일은 "카카오 인코더"와 같은 프로그램을 이용하여 간단하게 webm 파일로 변환할 수 있습니다.
지정된 폴더에 mp4와 webm 파일을 같이 넣어두면 거의 모든 브라우저에서 호환이 될 수 있겠습니다.
예제 mp4 파일과 index.html 파일(위 소스코드)은 아래의 첨부파일을 다운 받아, 인덱스 파일을 브라우저에서 실행해 보세요~
video_index.zip자~ HTML5로 웹페이지에 동영상 배경을 간단하게 넣는 방법을 알아보았습니다. 첨부파일 다운받아 보시면 쉽게 이해하실거에요^^
첨부파일의 index.html 파일의 코드는 아래와 같아요.
(아래는 이미지 파일이니 소스코드 드래그로 복사하려고 하지 마세요^^)
'컴퓨터&IT&Adobe' 카테고리의 다른 글
| 윈도우XP 랜섬웨어 KB4012598 패치 (0) | 2017.05.15 |
|---|---|
| 네이버 동영상 다운로드 방법 (1) | 2017.03.31 |
| 유튜브 MP3 추출 사이트 (0) | 2016.08.17 |
| 파일명 일괄 변경 2가지 방법 : 무설치 (1) | 2016.08.10 |
| 노트2 와이파이 안켜짐 해결방법:분해 없이 연결하기 (2) | 2016.08.05 |
댓글