[HTML/CSS] video 태그를 사용한 동영상 삽입과 디자인 방법

HTML을 이용하여 동영상을 쉽게 삽입할 수 있으며, 이를 통해 사용자들이 동영상을 쉽게 시청할 수 있도록 할 수 있습니다. 이번 글에서는 HTML video 태그를 사용하여 동영상을 삽입하는 방법과 함께 디자인 방법에 대해 알아보겠습니다.

---

video 태그란?

video 태그는 HTML5에서 추가된 태그 중 하나로, 동영상을 웹 페이지에 삽입할 때 사용됩니다. video 태그를 사용하면 웹 페이지에 동영상을 쉽게 삽입할 수 있으며, 사용자들은 동영상을 보기 위해 별도의 플러그인 설치나 동영상 파일을 다운로드할 필요가 없습니다.

video 태그의 속성

video 태그는 다양한 속성을 가지고 있습니다. 이 중에서도 가장 중요한 속성들은 다음과 같습니다.

1. controls: 동영상 재생 컨트롤러를 표시할지 여부를 지정합니다.
2. autoplay: 페이지 로딩 시 동영상을 자동으로 재생할지 여부를 지정합니다.
3. loop: 동영상 재생이 끝나면 자동으로 처음부터 재생할지 여부를 지정합니다.
4. muted: 동영상 소리를 음소거할지 여부를 지정합니다.
5. poster: 동영상이 로드되기 전에 표시되는 이미지를 지정합니다.
6. width: 동영상의 너비를 지정합니다.
7. height: 동영상의 높이를 지정합니다.

태그는 아래와 같은 구조로 사용됩니다.

<video width="640" height="480" controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

위 코드에서 width와 height는 동영상의 크기를 지정하는 속성입니다. controls 속성은 동영상 재생 컨트롤러를 표시할지 여부를 결정하며, 이 속성이 지정되어 있으면 동영상 재생, 일시정지, 음소거, 음량 조절 등을 사용자가 직접 조작할 수 있습니다.

그리고 source 태그 안에 있는 src 속성은 동영상 파일의 경로를 지정하는 속성입니다. type 속성은 동영상 파일의 형식을 지정하는 속성으로, 여러 가지 형식을 지정할 수 있습니다. 마지막으로, Your browser does not support the video tag.는 해당 브라우저에서 동영상을 지원하지 않을 경우 출력되는 메시지입니다.

 

위 코드를 동작시키면 아래와 같이 나옵니다.

 

video 태그를 이용한 동영상 디자인 방법

컨트롤러 디자인 변경

video 태그의 controls 속성을 이용하면, 동영상 재생 컨트롤러의 디자인을 변경할 수 있습니다. 예를 들어, 다음과 같이 controls 속성을 지정하고, CSS를 이용하여 동영상 재생 컨트롤러의 디자인을 변경할 수 있습니다.

<video width="640" height="480" controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<style>
video::-webkit-media-controls {
  /* Webkit */
  color: red;
}
video::-moz-media-controls {
  /* Firefox */
  color: blue;
}
video::-ms-media-controls {
  /* IE */
  color: green;
}
</style>

위 코드에서는 Webkit, Firefox, IE에서 각각 다른 색상의 동영상 재생 컨트롤러를 지정하고 있습니다.

동영상 크기 변경

동영상의 크기를 변경하려면, video 태그의 width와 height 속성을 이용합니다. 이때, width와 height 속성을 모두 지정해야 정확한 크기로 동영상이 출력됩니다. 예를 들어, 다음과 같이 video 태그의 width와 height 속성을 각각 800과 600으로 지정하면, 동영상이 800x600 크기로 출력됩니다.

<video width="800" height="600" controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

동영상 자동재생

동영상을 자동으로 재생하려면, video 태그의 autoplay 속성을 이용합니다. 이때, 사용자가 동영상을 재생하지 않더라도 자동으로 재생되므로, 주의해야 합니다. 예를 들어, 다음과 같이 video 태그에 autoplay 속성을 추가하면, 동영상이 자동으로 재생됩니다.

<video width="640" height="480" controls autoplay>
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>