【HTML】video 태그로 동영상 퍼가기

동영상 태그로 동영상 퍼가기

이미지적으로는 img 태그로 이미지를 취급하는 것 같은 느낌입니다.
video 태그로 HTML에 동영상을 삽입하는 경우에는, 예를 들면 다음과 같이 기술합니다.

index.html

<video src="movie.mp4"></video>

소스 태그 사용 및 사용자 환경 고려

소스 태그를 사용하면 브라우저에서 재생할 동영상을 제시할 수 있습니다.
또한 source 태그에서는 형식이 다른 동영상 데이터를 여러 개 지정할 수 있습니다.
이렇게하면 브라우저가 설명 된 순서대로 재생 가능한 데이터를 사용하기 때문에
더 많은 환경에서 동영상을 시청할 가능성이 높아집니다.

index.html

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<source src="movie.webm">
</video>

video 태그의 다양한 속성

videodug의 속성은 주로 4가지입니다.

1. poster 속성

사용자 환경에서 사용할 수있는 동영상이없는 경우
표시할 이미지 파일을 지정할 수 있습니다.

index.html

<video src="movie.mp4" poster="samnail.jpg"></video>

2. controls 속성

재생, 일시 정지, 재생 위치 이동, 볼륨 등
동영상을 이용하기 쉽게하는 인터페이스를,
브라우저가 자동으로 볼 수 있습니다.

index.html

<video src="movie.mp4" controls></video>

3. autoplay 속성

웹페이지를 로드하면 동영상이 자동으로 재생됩니다.

index.html

<video src="movie.mp4" autoplay></video>

4. preload 속성

웹페이지를 로드한 시점에서 동영상을 뒤에서 로드합니다.
동영상을 미리 로드하여 사용자가 재생 버튼을 누를 때
동영상 재생이 부드러워질 수 있습니다.

index.html

<video src="movie.mp4" preload="none"></video>

사용자가 동영상을 많이 필요로하지 않는다고 가정하거나,
서버에 과도한 부담을주지 않으려면
preload="none"을 지정하면 좋다고 합니다.

결국 내가 쓴 코드

index.html

<div class="movies">
  <video controls autoplay poster="images/samnail.jpg" width="320" height="240">
    <source src="images/movie.mp4">
  </video>
</div>

실제 브라우저에서는

요약

HTML에 동영상을 포함하는 경우에는, video 태그로 구현 가능합니다.

source 태그를 사용하면 더 많은 환경에서 동영상을 시청할 가능성이 높아집니다.

video dog의 속성은 poster 속성, controls 속성, autoplay 속성, preload 속성의 네 가지입니다.