video 元素与宽高比
嵌入视频并保持正确的宽高比
video 元素与宽高比 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
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 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; }
-->响应式视频 CSS
使用 CSS 让视频具有响应式效果：
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);
});全屏应用程序接口
以编程方式进入和退出全屏：
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 元素要点：
controls— 显示播放器界面width和height— 防止布局偏移poster— 播放前显示缩略图preload="metadata"— 良好的性能默认设置- 响应式设置：
width: 100%; height: auto;或aspect-ratio: 16/9 - 静音视频可以自动播放；大多数浏览器不允许未静音视频自动播放
常见问题解答
「video 元素与宽高比」课时是免费的吗？
是的 — 「video 元素与宽高比」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「video 元素与宽高比」这节课中我会学到什么？
嵌入视频并保持正确的宽高比 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「video 元素与宽高比」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。