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
반응형
'HTML' 카테고리의 다른 글
| [HTML] PIN번호 vs 비밀번호 (1) | 2023.09.04 |
|---|---|
| [HTML] ios기기에서 video 자동재생 설정 시, 전체화면모드로 변경되는 이슈 (4) | 2022.03.23 |
| [HTML] 영상을 마크업에 추가하는 방법-2(iframe) (0) | 2022.03.23 |
댓글