[HTML] VIDEO 태그 : 페이지에 동영상 넣기

[HTML]
VIDEO 태그
/
페이지에 동영상 넣기
웹 홈페이지

✅ 상황
→ 웹 홈페이지를 만들다보면 동영상을 넣고 싶을 때,
또, 메인 페이지에서 풀화면으로 동영상을 깔아두고 싶을 때!

✅ 방법
→ HTML video tag 사용

 

🟠 video tag 기본 문법

<!-- 비디오 태그 문법 -->
<video src="비디오 주소"></video>

<!-- 비디오 태그 사용 예시 -->
<video src="../video/main_video.mp4"></video>

 

🟣 video tag 추가 문법

<!-- 비디오 태그 문법 -->
<video src="비디오 주소" controls loop muted autoplay poster="이미지주소">
	비디오가 깨졌을 때 나올 텍스트
</video>

<!-- 비디오 태그 사용 예시 -->
<video src="../video/main_video.mp4" muted autoplay loop poster="이미지주소">
	video error(현재 브라우저는 비디오를 재생할 수 없습니다)
</video>

 

🟢 video tag 속성 설명

➡️ src : 동영상 주소를 적는 속성
➡️ controls : 동영상을 재생하기 위한 바를 표시하는 속성
➡️ loop : 동영상 반복을 결정
➡️ muted : 음소거 설정
➡️ autoplay : 페이지가 로드되면 바로 동영상이 재생되도록 설정
➡️ poster : "이미지파일경로 입력" (동영상이 재생되기 전에 대표로 보여줄 이미지 주소 입력)