HTML video 태그

<video> 태그를 사용하면 웹페이지에 동영상을 표시할 수 있습니다.

HTML video 태그는 src 속성을 활용해 동영상 파일의 경로를 지정합니다.

동영상 파일 경로는 로컬(같은 컴퓨터 내) 파일의 위치를 가리키거나, 인터넷 상의 URL 주소일 수도 있습니다.

<video> 태그의 내부에는 동영상이 지원되지 않을 때 표시할 대체 컨텐츠를 작성할 수 있습니다.

예를 들어, 다음과 같은 HTML 코드를 사용하면 동영상 파일의 경로를 지정할 수 있습니다.

로컬 동영상 파일
<video src="/src/생일.mp4">생일</video>

인터넷 상의 URL
<video src="https://www.my-drive.com/birthday.mp4">생일</video>

실제로 http://media.w3.org/2010/05/sintel/trailer.mp4와 같은 동영상 URL을 웹사이트에 표시하려면, 아래와 같이 HTML을 작성할 수 있습니다.

동영상 추가
<video src="http://media.w3.org/2010/05/sintel/trailer.mp4">테스트 영상</video>

하지만 이렇게 video 태그를 활용하면 동영상을 재생하거나 멈출 수 없습니다.

재생 콘트롤을 추가하려면 video 태그에 controls 속성을 추가해야 합니다.

이 컨트롤은 재생/일시정지, 음량 조절과 같은 버튼과 영상 진행률을 조절하는 슬라이더로 구성되어 있습니다.

동영상 콘트롤 추가
<video src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls>
  테스트 영상
</video>

위와 같이 video 태그에 "controls" 속성을 추가하면, 동영상을 재생하거나 멈출 수 있습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!