[HTML] 영상을 마크업에 추가하는 방법-1(video)

HTML

[HTML] 영상을 마크업에 추가하는 방법-1(video)

여니노트 2022. 3. 22. 18:34

728x90

<video> 태그 이용

HTML5 기준으로 <video> 사용 방법 명시.
별도 파일로 영상을 전달받은 경우.

대표적인 확장자
- HTML5 표준이 공식적으로 지원하는 비디오 파일 형식 : MP4, WebM, OGV

파일형식 (파일 확장자)	설명
MPEG (.mpg .mpeg)	- Moving Picture Experts Group에 의해 개발. - 변환 코덱을 이용하는 손실 압축 방식을 사용.
OGV (.ogg)	- Xiph 재단에 의해 개발. - MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식.
QuickTime (.mov)	- Apple에 의해 개발. - 매킨토시 컴퓨터에 동영상을 지원하기 위해 개발된 파일 형식.
WebM (.webm)	- 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일. - 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용하는 멀티미디어 파일 형식.

지원 브라우저

Browser MP4 WebM OGG

IE O
(IE9 이상 O) X X

Edge O O O

Chrome O O O

Firefox O O O

Safari O O X

Opera O O O

video 속성

속성	값	설명
src	URL	- 비디오 파일의 경로 - src는 선택사항으로, 태그 사용해서 파일 경로 작성 가능.
width	pixels	- 비디오 파일의 가로
height	pixels	- 비디오 파일의 세로
controls	true false	- 비디오의 기본적인 동작을 조절할 수 있는 컨트롤러
autoplay	true false	- 비디오의 자동 재생 여부
loop	true false	- 비디오의 반복 재생 여부
poster	URL	- 비디오가 아직 준비 중일 때 불러올 썸네일 이미지 파일의 경로
preload	auto metadata none	- 비디오 로드 전, 로드 방식 여부 - default로 metadata를 권장하지만, 설정하지 않았다면 각 브라우저 별로 정의된 기본값이 다름. - auto : 페이지가 로드될 때, 비디오 파일 전체를 로드. - metadata : 페이지가 로드될 때, 비디오 파일의 메타데이터 정도만 로드. - none : 페이지가 로드될 때, 비디오 파일 로드하지 않음.
muted	true false	- 비디오의 오디오 출력 여부
playsinline	true false	- ios 기기에서 전체 화면 모드 여부

예시코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <video id="video" poster="img_video.jpg" controls autoplay muted playsinline>
        <source src="/video/video.mp4" type="video/mp4">
        <source src="/video/video.webm" type="video/webm">
    </video>
</body>
</html>

[참고자료]

- <video> 태그 사용 방법 : https://www.w3schools.com/html/html5_video.asp

- <video> 태그 관련 : http://tcpschool.com/html/html5_multimedia_video

- <video> 태그 속성 관련 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

728x90

Browser	MP4	WebM	OGG
IE	O (IE9 이상 O)	X	X
Edge	O	O	O
Chrome	O	O	O
Firefox	O	O	O
Safari	O	O	X
Opera	O	O	O