简介
在本实验中，你将学习如何使用功能强大的 <video> 标签在 HTML 中嵌入和自定义视频元素。本实验涵盖创建交互式视频播放器所需的基本技术，包括添加控件、配置视频源、设置自定义缩略图，以及探索各种视频标签属性，从而提升视频播放体验。
通过循序渐进的操作，你将掌握 HTML5 视频嵌入的实用技能，从创建基础视频元素开始，逐步学习高级配置。你将了解如何添加多个视频源、控制播放设置、设置自定义缩略图，并直接在网页中创建更具吸引力、更易于使用的视频体验。
创建带控件的基础视频元素
在本步骤中，你将学习如何在 HTML 中创建带有基本控件的视频元素。HTML5 提供了简单而强大的 <video> 标签，可将视频直接嵌入网页。
首先创建一个 HTML 文件来演示视频嵌入。在 WebIDE 中，于 ~/project 目录创建名为 video-demo.html 的新文件。
touch ~/project/video-demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Video Element</title>
</head>
<body>
<h1>My First Video Element</h1>
<video controls width="640" height="360">
Your browser does not support the video tag.
</video>
</body>
</html>
下面说明视频元素的主要组成部分：
<video>标签：嵌入视频内容的主要容器controls属性：添加默认的视频播放器控件，例如播放、暂停和音量调节width和height属性：设置视频播放器的尺寸- 标签内部的文本：当浏览器不支持 HTML5 视频时显示的备用提示信息
controls 属性非常重要，因为它会为用户提供标准的播放控件，例如播放、暂停、音量调节和全屏模式。
注意：详细了解如何在 WebIDE 中预览 HTML 文件。
添加视频源并设置静音播放
在本步骤中，你将学习如何为 HTML 视频元素添加视频源，并控制视频的初始播放状态。我们将修改上一步创建的 video-demo.html 文件，加入视频源，并演示如何让视频默认静音。
在 WebIDE 中打开 ~/project/video-demo.html 文件，并将其内容更新为：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Source and Mute</title>
</head>
<body>
<h1>Video with Multiple Sources</h1>
<video controls width="640" height="360" muted>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
下面说明新增的内容：
<source>标签：指定多种视频格式，以兼容不同浏览器- 第一个视频源是 MP4 文件
- 第二个视频源是 WebM 文件，即另一种格式
- 浏览器会使用它支持的第一个格式
muted属性：视频加载时自动静音- 可避免视频意外播放声音
- 如果希望视频默认有声音，可以移除此属性
type属性：指定视频源的 MIME 类型- 帮助浏览器判断是否可以播放该视频
设置脚本会在本地创建这两个示例视频文件，因此示例无需依赖外部视频托管服务即可运行。在实际场景中，你可以将它们替换为自己的视频文件路径。
使用视频海报设置自定义缩略图
在本步骤中，你将学习如何使用 poster 属性，在视频开始播放前为视频元素添加自定义缩略图。首先下载一张示例图片作为视频海报。
使用以下命令下载示例图片：
wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png
现在更新 ~/project/video-demo.html 文件，添加 poster 属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video with Custom Poster</title>
</head>
<body>
<h1>Video with Custom Thumbnail</h1>
<video controls width="640" height="360" muted poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
关于 poster 属性，需要注意以下几点：
- 在视频开始播放前显示自定义图片
- 用作预览图，替代视频的第一帧
- 有助于创建更具吸引力的用户界面
- 支持本地图片文件和远程图片文件
海报图片可以预览视频内容，让用户在播放开始前了解视频信息，从而改善用户体验。
探索视频标签属性和配置
在本步骤中，你将进一步了解 HTML5 视频元素支持的各种属性和配置。更新 ~/project/video-demo.html 文件，探索以下高级设置：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Video Configurations</title>
</head>
<body>
<h1>Exploring Video Tag Attributes</h1>
<video
controls
width="640"
height="360"
muted
poster="video-thumbnail.png"
preload="metadata"
loop
playsinline
>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
下面介绍新增的属性：
preload="metadata"：- 控制视频在播放前的加载方式
- 可选值：
auto（加载整个视频）、metadata（仅加载元数据）、none（不预加载）
loop：- 视频播放结束后自动重新播放
- 适合背景视频或循环播放的内容
playsinline：- 允许视频在移动设备中以内嵌方式播放
- 防止视频在 iOS 设备上自动进入全屏模式
你还可以尝试以下实用属性：
autoplay：自动开始播放视频crossorigin：处理跨源视频disablepictureinpicture：禁止画中画模式
实用提示：
- 并非所有浏览器都支持每个属性
- 始终在不同设备和浏览器中进行测试
- 使用
autoplay或loop时，要考虑用户体验
改善视频播放体验
在本步骤中，你将学习如何通过添加自定义控件和样式来改善视频播放体验。创建新文件 ~/project/video-enhanced.html，并写入以下内容：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Enhanced Video Player</title>
<style>
.video-container {
max-width: 640px;
margin: 0 auto;
position: relative;
}
.custom-controls {
display: flex;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
}
.custom-controls button {
background: none;
border: none;
color: white;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-container">
<video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
<div class="custom-controls">
<button onclick="togglePlay()">Play/Pause</button>
<button onclick="muteToggle()">Mute/Unmute</button>
<input
type="range"
min="0"
max="100"
value="50"
onchange="changeVolume(this.value)"
/>
</div>
</div>
<script>
const video = document.getElementById("myVideo");
function togglePlay() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function muteToggle() {
video.muted = !video.muted;
}
function changeVolume(value) {
video.volume = value / 100;
}
</script>
</body>
</html>
如果你刚接触 CSS 和 JavaScript，不必担心。这个示例提供了一种简单的方法，用于创建自定义视频控件并设置视频播放器界面的样式。
这个示例的主要改进包括：
自定义视频控件：
- 创建包含播放/暂停按钮和静音按钮的自定义控制面板
- 添加音量滑块，实现精确的音量控制
CSS 样式：
- 设置视频容器和控件的样式
- 使用 Flexbox 进行布局
- 为控件添加半透明背景
JavaScript 交互：
togglePlay()：手动控制视频播放和暂停muteToggle()：切换视频的静音状态changeVolume()：以编程方式调节视频音量
与浏览器默认控件相比，这种方法在设计视频播放器界面时更加灵活。
总结
在本实验中，你学习了如何使用 <video> 标签在 HTML 中嵌入和自定义视频元素。本实验介绍了创建交互式视频播放器的基本技术，包括添加基本控件、指定多个视频源以及配置播放设置。你掌握的主要技能包括设置视频尺寸、实现备用内容、添加默认播放器控件，以及管理视频静音和视频源选择。
你通过创建具有播放/暂停控件、宽度和高度配置以及多种视频格式支持等标准功能的示例视频元素，实践了 HTML5 视频嵌入技术。本实验还帮助你理解视频标签属性，并通过各种配置选项增强嵌入式视频内容的用户交互。
