본문으로 건너뛰기
실습하기

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 강의를 등록해 주세요!