웹페이지에 동영상을 삽입하고 싶다면 HTML5 <video> 태그를 활용할 수 있습니다. 별도의 플러그인 없이 브라우저만으로 동영상을 재생할 수 있어 매우 편리합니다.
<video> 태그 기본 구조
<video src="video.mp4" controls>
동영상이 지원되지 않는 브라우저입니다.
</video>
- src : 재생할 동영상 파일 경로
- controls : 재생, 일시정지, 볼륨 조절 등의 기본 컨트롤 표시
- autoplay : 페이지 로드시 자동 재생
- loop : 반복 재생
- muted : 음소거
- poster : 재생 전 표시할 이미지 (썸네일)
여러 형식의 동영상 지원하기
브라우저마다 지원하는 포맷이 달라 여러 소스 파일을 등록하는 것이 좋습니다.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
동영상이 지원되지 않는 브라우저입니다.
</video>
세부 옵션 예제
<video controls autoplay loop muted poster="thumbnail.jpg">
<source src="sample.mp4" type="video/mp4">
브라우저가 동영상을 지원하지 않습니다.
</video>
- controls : 컨트롤바 표시
- autoplay : 자동 재생
- loop : 반복 재생
- muted : 음소거
- poster : 썸네일 이미지
💡 동영상 썸네일 이미지 설정 팁!
동영상이 재생되기 전, 미리보기 이미지(썸네일)를 보여주고 싶다면 poster 속성을 사용하세요.
<video controls poster="thumb.jpg">
<source src="video.mp4" type="video/mp4">
</video>
설정 방법
- 썸네일 이미지를 준비하여 같은 폴더 또는 경로에 업로드
poster속성에 이미지 경로 입력- 동영상 재생 전 지정한 이미지가 노출됨
주의사항
- 모바일 환경에서는 autoplay + muted 조합만 자동 재생이 동작
- 용량이 크면 로딩 속도 지연 및 데이터 사용량 발생
- 동영상 포맷은
mp4,webm,ogv권장
마무리
<video> 태그를 이용하면 웹페이지에 손쉽게 동영상을 삽입할 수 있습니다. 위 예제와 팁처럼 다양한 속성과 포맷을 활용해 사용자의 환경에 맞게 적용해보세요!
더 많은 웹 개발 기초와 실습 정보는 아래 글에서 확인하세요!