반응형 영상 배경 만들기 – 웹 코딩 강좌

오늘은 HTML에서 video 태그를 활용해서 영상을 웹에 넣는 방법을 배워볼게요. 그리고 자연스럽게 간단한 레이아웃을 만드는 연습도 해볼게요. 비디오 태그에 사용 가능한 기능들을 자세히 알아보도록 할게요.
video : Video를 웹에 불러오는 HTML 태그 / video 태그 사이는 비디오 파일이 문제가 있어 지원하지 않는 경우에 대체 텍스트로 나옵니다.

Video 태그 – https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
미디어포맷 – https://developer.mozilla.org/ko/docs/Web/Media/Formats/Containers
C4D 영상 강좌 – https://www.youtube.com/watch?v=LAteZwppBdk&t=1s

예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

src : 비디오 파일이 있는 경로
controls : 플레이, 정지 등 영상을 컨트롤하는 기능 표시
autoplay 웹페이지가 열릴 때 자동으로 비디오 재생
loop 비디오 반복 재생
muted 비디오 음소거
poster : 동영상 재생 전에 보여줄 이미지 / 영상이 무거울 때 사용하면 좋겠죠.
source src : .mp4 / .ogg / .webm 동영상 포맷과 불러올 위치 입력

HTML에서 Video 태그는 일반적으로 이런 식으로 사용합니다. 참고로 모바일 브라우저 환경에서 영상을 자동 재생하기 위해서는 muted(음소거) 상태여야 됩니다.

<video src="assets/sample.mp4" muted autoplay loop poster="assets/sample-poster.png">
</video>

조금 더 상세하게 사용을 하자면 아래처럼 사용 가능합니다.

<video controls autoplay loop>
    <source src="/media/sample.webm" type="video/webm">
    <source src="/media/sample.mp4" type="video/mp4">
    죄송합니다. 현재 사용중인 브라우저는 임베드한 비디오를 제공하지 않습니다.
</video>