본문 바로가기
think

[HTML] video 태그로 백그라운드 영상 삽입하기

by 세상 밖으로 2020. 9. 15.

요즘 홈페이지를 보면 메인 화면 배경에 동영상이 자동재생되는 디자인들이 자주 보이는데요.

 

메인 비주얼이나 배경에 영상을 넣는 것이 새로운 트랜드인것 같아 <video>태그로 영상 삽입하는 방법을 알아보겠습니다.

 

비디오 파일을 웹페이지에 삽입할 때는 <video>태그를 사용합니다.

 

 

<video> 태그의 기본적인 사용 방법
<video controls>
    <source src="비디오 파일 경로" type="video/mp4">
    대체 텍스트
</video>

 

 

<video> 태그의 속성값
속성명 설명
src 비디오 파일 경로
type 비디오 타입
width, height 비디오 가로, 세로 크기
autoplay 자동 재생
loop 반복 재생
muted 음소거
controls 재생, 정지 등의 버튼

 

 

<video> 태그의 속성 사용 방법
<video width="100%" height="auto" autoplay loop muted controls>
    <source src="비디오 파일 경로" type="video/mp4">
    대체 텍스트
</video>

원칙적으로는 autoplay="autoplay"라고 쓰는 것이 맞지만 속성과 값이 같을 경우 속성명만 써도 됩니다.

 

 

 

<video> 태그 사용시 알아두세요!

- ie9 이상부터 사용 가능합니다.

- 영상의 용량이 클 경우 트래픽 문제가 발생할 수 있습니다. (20mb이하 권장)

- <video>태그 안의 대체 텍스트는 영상이 지원되지 않는 브라우저에서 뜨는 안내문구입니다.

- 브라우저의 종류나 버전에 따라 지원하는 영상의 포멧이 다르니 영상이 정상적으로 재생되는지 확인하여야 합니다.

- 모든 브라우저와 호환되는 mp4포멧의 영상을 사용하시는 것이 좋습니다.

- 크롬에서는 음소거를 하지않으면 자동재생이 안되는 경우가 있으니 muted를 꼭 넣어줍니다. 그래도 자동재생이 되지 않는다면 muted playsinline를 함께 넣어줍니다.

 

 

 

브라우저별 영상 포맷 지원
브라우저 지원 포멧
크롬 webm, mp4, ogv
사파리/ie mp4, webm
오페라 webm, ogg
파이어폭스 mp4, webm.ogv

 

 

 

백그라운드 영상 삽입하기!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,body,div, video {margin:0;padding:0;}
body {padding:0px, 0px, 0px, 0px; margin:0px, 0px, 0px, 0px; overflow:hidden; background-color:#000; } .container {}
</style>
</head>

<body>
<div class='container'>
     <video width="100%" height="auto" autoplay loop muted controls>
        <source src="video.mp4" type="video/mp4">
        대체 텍스트

    </video>
</div>
</body>
</html>

 

 

안동 관광지 여행코스 추천

댓글0