반응형
요즘 홈페이지를 보면 메인 화면 배경에 동영상이 자동재생되는 디자인들이 자주 보이는데요.
메인 비주얼이나 배경에 영상을 넣는 것이 새로운 트랜드인것 같아 <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>
반응형
'think' 카테고리의 다른 글
| 포스트코로나 코로나 바이러스가 대학에 미치는 영향 (0) | 2020.10.15 |
|---|---|
| 혈당 낮추는 음식, 천연 식재료는? (0) | 2020.09.16 |
| 2020 문화유산채널 영상공모전 모집공고 접수방법 (0) | 2020.09.03 |
| 네이버 스마트스토어 판매자센터 또 접속 오류 (0) | 2020.08.31 |
| 구글쇼핑 수수료 무료 (0) | 2020.08.28 |
댓글