오늘은 <video>를 사용하여 HTML에 MP4 동영상을 빠르게 삽입하는 방법을 배웁니다. 요소. 다음 내용을 다루겠습니다.
- 동영상 플레이어의 크기를 조정하는 방법
- 동영상 자동 재생 방법
- 동영상을 무한 반복하는 방법
대부분의 튜토리얼은 개념을 설명하기 위해 작은 비디오에 GIF를 사용합니다. MP4의 품질이 더 좋고 공간을 덜 차지한다는 것을 알았습니다. MP4는 WebM과 달리 모든 최신 브라우저에서 작동하며 YouTube와 같은 동영상 서비스에도 업로드할 수 있습니다.
HTML5 동영상 요소로 동영상 삽입
HTML에 MP4 비디오를 표시하려면 HTML5 <video>를 사용해야 합니다. 요소. 가장 간단한 구현은 다음과 같습니다.
<video width="500" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
controls을 제거할 수 있습니다. 속성이지만 사용자가 동영상을 일시 중지/재생/되감기할 수 있기 때문에 권장하지 않습니다.
500 값은 픽셀 단위(500px)로 측정됩니다.
"path-to-your-video.mp4"를 바꾸세요. 실제 MP4 소스를 사용하면 이것을 테스트에 사용할 수 있습니다(내 튜토리얼 중 하나에서)
https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4동영상 플레이어의 크기(너비/높이) 조정
현재 동영상의 너비는 500픽셀이며 원하는 값으로 변경할 수 있습니다. 상대 공간(비디오 요소가 내부에 있는 컨테이너)의 100%를 차지하도록 하려면 간단히 width="100%"로 변경할 수 있습니다. .
height를 사용하여 높이를 조정할 수도 있습니다. . 다음은 둘 다 사용하는 예입니다.
<video width="100%" height="400" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>동영상 자동 재생(한 번)
MP4 동영상을 한 번 자동 재생하려면 사용자가 화면에서 동영상을 처음 볼 때 autoplay를 추가하세요. 동영상 요소의 속성:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>자동재생 작동 방식
자동 재생 기능은 사용자가 화면 표시 영역 안에 동영상을 가져오자마자 자동으로 실행됩니다.
동영상 반복
HTML5에서 MP4 동영상을 반복(무한 재생)하려면 loop를 사용하세요. 속성:
<video width="500" controls autoplay loop>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
참고: controls 속성을 사용하면 동영상을 일시 중지/중지할 수 있지만 동영상이 반복되는 경우 특히 사운드가 성가실 수 있다는 점에 유의하세요. 특정 사용 사례에서 의미가 있을 때만 루프 속성을 사용하세요.
브라우저 지원
오래된 공룡 브라우저의 시대는 거의 끝났습니다. 그러나 video 요소를 지원하지 않는 브라우저의 경우 <video> 사이에 텍스트를 추가할 수 있습니다. 사용자에게 알리는 태그:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
Your browser is outdated, update it to display the video
</video>텍스트는 구식 브라우저(Internet Explorer 9 이하)에서만 표시됩니다.
MP4 대체와 함께 WebM 사용
WebM 버전과 MP4 버전의 동영상이 모두 있는 경우 사용자 브라우저가 WebM을 지원하지 않는 경우 다음 코드를 사용하여 MP4를 폴백으로 사용할 수 있습니다.
<video width="500" controls>
<source src="path-to-your-video.webm" type="video/webm" />
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>참고:현재로서는 Chrome과 Opera만 WebM을 완벽하게 지원하지만 FireFox와 Edge도 이를 구현하기 위해 노력하고 있습니다.
보너스 팁
MP4 비디오를 빠르게 녹화하려면 다음 무료 도구를 사용할 수 있습니다.
- Kap 앱(Mac)
- 아이스크림 화면 녹화(Windows)
동영상을 무료로 업로드하고 저장하려면 Cloudinary를 추천합니다.