💻 웹에서 많이 사용되는 비디오
- MP4(MPEG-4 Part 14)
최신 웹브라우저 대부분과 호환되는 인터넷 친화적인 비디오포맷으로, 품질이 좋고 파일 크기가 작아, 웹에서 동영상을 재생하는데 인기있는 선택지다. - WebM
HTML5 비디오 및 오디오 태그와 함께 사용하기 위해 Google이 개발한 비디오 포맷으로, 고화질 동영상을 손실없이 효과적으로 압축할 수 있는 고성능 비디오 코덱인 VP8 및 VP9을 지원한다.
📌 비디오 태그
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>- Video Poster 속성
동영상이 로딩될때 또는 재생버튼을 누르기 전까지 보여줄 이미지
✏️ 비디오 적용
무료사진 및 영상
⚡코드
<video autoPlay={true} muted={true} loop={true}>
<source src="동영상주소" type="video/mp4" />
</video>- autoPlay: 처음 웹사이트 로드 후 비디오 자동재생
- loop: 비디오 재생 후에 자동재생
- muted: 오디오 끄기(source태그 사용시 muted={true}를 해줘야 autoPlay가 true됨)
⚡결과
