video 요소 및 가로세로 비율
비디오를 삽입하고 올바른 가로세로 비율 유지하기
video 요소 및 가로세로 비율은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
video 요소
<video> 요소는 video를 기본 방식으로 삽입합니다:
<video controls width="800" height="450" src="tutorial.mp4">
Your browser does not support video.
</video>필수 속성
중요한 video 속성:
<video
src="demo.mp4"
controls <!-- show player UI -->
width="1280" <!-- intrinsic width -->
height="720" <!-- intrinsic height -->
poster="preview.jpg" <!-- thumbnail before play -->
preload="metadata" <!-- preload only metadata -->
>
Your browser does not support video.
</video>미리 보기 이미지 속성
poster 속성은 video가 재생되기 전에 표시되는 미리 보기 이미지를 설정합니다:
<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
<source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
or the first frame of the video (browser-dependent) -->화면 비율을 위한 너비와 높이
레이아웃 이동을 방지하려면 항상 너비와 높이를 지정합니다:
<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
video { width: 100%; height: auto; }
-->반응형 video CSS
CSS로 video를 반응형으로 만듭니다:
video {
width: 100%;
height: auto;
max-width: 1280px;
display: block;
margin: 0 auto;
}
/* Aspect ratio box: */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}CSS 화면 비율 속성
CSS aspect-ratio를 사용하는 최신 방식입니다:
video {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */JS를 통한 video 재생 제어
JavaScript로 video를 제어합니다:
const video = document.getElementById('my-video');
video.play();
video.pause();
video.currentTime = 60; // jump to 1 minute
video.playbackRate = 1.5; // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();
console.log(video.duration); // total length
console.log(video.paused); // is it paused?Video 이벤트
video 이벤트를 감지합니다:
video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
console.log('Duration:', video.duration);
console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});전체 화면 API
프로그래밍 방식으로 전체 화면에 진입하고 종료합니다:
const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});video 자동 재생 정책
브라우저의 video 자동 재생 규칙:
- 음소거된 video → 모든 최신 브라우저에서 자동 재생할 수 있습니다
- 음소거되지 않은 video → 사용자가 페이지와 상호작용한 경우가 아니면 차단됩니다
- 구글의 미디어 참여 지수 → 자주 방문하는 사용자에게는 자동 재생이 허용될 수 있습니다
- 항상 대체 수단으로 재생 버튼을 제공해야 합니다
video 접근성
video의 접근성 요구 사항:
- 모든 대화와 중요한 소리에 자막을 제공합니다
- 청각 장애 또는 난청 사용자를 위해 대본을 제공합니다
- 시각 장애 사용자를 위해 오디오 설명을 제공합니다(시각으로만 전달되는 정보를 설명합니다)
- 키보드 제어 기능이 작동하는지 확인합니다(기본 제어 기능은 작동합니다)
빠른 확인
video가 재생되기 전에 정적 이미지를 표시하는 속성은 무엇입니까?
복습: video 요소
video 요소의 핵심:
controls— 재생기 사용자 인터페이스 표시width및height— 레이아웃 이동 방지poster— 재생 전 미리 보기 이미지preload="metadata"— 성능을 위한 적절한 기본값- 반응형:
width: 100%; height: auto;또는aspect-ratio: 16/9 - 음소거된 video는 자동 재생할 수 있지만, 대부분의 브라우저에서는 음소거되지 않은 video를 자동 재생할 수 없습니다
자주 묻는 질문
“video 요소 및 가로세로 비율” 강의는 무료인가요?
네 — “video 요소 및 가로세로 비율” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“video 요소 및 가로세로 비율”에서 뭘 배우나요?
비디오를 삽입하고 올바른 가로세로 비율 유지하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“video 요소 및 가로세로 비율” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.