Blog

HTML5 비디오 태그 이해하기

웹 페이지에서 비디오를 재생하는 것은 이제 선택이 아닌 필수가 되었습니다. HTML5에 포함된

비디오 태그의 기본 구조

HTML5의

<video src="path/to/video.mp4"></video>

위와 같이 작성하면 기본적인 비디오가 웹 페이지에 삽입됩니다. 하지만 사용자 경험을 고려하면, 추가적인 속성을 활용하는 것이 좋습니다.

주요 속성 설명

HTML5 비디오 태그는 여러 속성을 제공하여 비디오의 재생 방식과 환경을 조정할 수 있습니다. 주요 속성은 다음과 같습니다:

• controls: 비디오 재생, 일시 정지, 볼륨 조절 등 기본 제어 기능을 제공합니다.
• autoplay: 페이지가 로드될 때 자동으로 비디오를 재생합니다.
• loop: 비디오가 종료된 후 자동으로 다시 시작합니다.
• muted: 비디오를 음소거 상태로 재생합니다. 보통 자동 재생 시 필수입니다.
• poster: 비디오가 로드되는 동안 대체로 보여줄 이미지를 설정합니다.
• preload: 비디오 데이터를 로딩하는 방법을 지정합니다. ‘none’, ‘metadata’, ‘auto’로 설정 가능합니다.

모바일 환경에서의 주의사항

PC 환경에서 비디오가 잘 작동하더라도 모바일에서는 문제가 발생할 수 있습니다. 특히 iOS 기기에서는 비디오가 자동으로 전체화면으로 전환되는 현상이 종종 발생합니다. 이를 방지하기 위해서는 다음의 세 가지 속성을 설정해주어야 합니다:

• autoplay
• muted
• playsinline

이 경우, 아래와 같은 코드를 사용하여 설정할 수 있습니다:

<video src="video/video.mp4" autoplay muted playsinline></video>

이와 같은 설정은 안드로이드 기기에서는 autoplay와 muted 두 속면으로 충분하지만, iPhone 유저의 경우 playsinline 속성을 추가해야만 비디오가 전체화면으로 재생되는 문제를 해결할 수 있습니다.

비디오 파일 형식 및 브라우저 호환성

여러 브라우저가 지원하는 비디오 파일 형식은 다양합니다. 일반적으로 가장 많이 사용되는 형식은 MP4, WebM, OGV입니다. 각 브라우저에 따라 지원하는 형식이 다르기 때문에 여러 형식의 비디오 파일을 함께 지정하는 것이 좋습니다.

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogv">
  비디오를 재생할 수 없는 경우 대체할 내용을 여기에 작성합니다.
</video>

CSS로 스타일링하기

비디오 태그는 다른 HTML 요소와 마찬가지로 CSS로 스타일링할 수 있습니다. 예를 들어, border나 배경색을 설정하여 비디오 플레이어의 외관을 변화시킬 수 있습니다.

<style>
  #myVideo {
    border: 5px solid #ccc;
    border-radius: 10px;
  }
</style>

결론

HTML5의

자주 찾으시는 질문 FAQ