Here’s an article detailing an “HTML Video Tutorial: Zero-Based Entry Guide”:
HTML 视频教程：零基础入门指南
在现代网页开发中，将视频直接嵌入网页已成为一项基本技能。得益于 HTML5 的 <video> 标签，您不再需要像 Flash 这样的第三方插件来显示多媒体内容。本指南将带您了解 <video> 标签的基础知识，从简单的嵌入到多源和可访问性等更高级的功能。
基本的 <video> 标签
嵌入视频最简单的方法是使用带有 src 和 controls 属性的 <video> 标签。
src属性指定视频文件的路径。controls属性添加浏览器默认的视频控件，例如播放/暂停、音量和全屏切换。
示例：
“`html
我的第一个 HTML 视频
这是一个使用 HTML 视频标签嵌入的简单视频。
“`
在此示例中，my-awesome-video.mp4 应该是与您的 HTML 文件位于同一目录中的视频文件，或者您可以提供一个完整的 URL。
用于自定义的常用属性
<video> 标签支持多个属性来控制其行为和外观：
autoplay: 如果存在，视频将在加载后立即自动开始播放。注意： 许多浏览器会阻止带声音的自动播放，除非用户与页面进行了交互，或者视频被静音。loop: 如果存在，视频播放结束后将自动循环回到开头。muted: 如果存在，视频的音频输出将默认静音。这通常与autoplay结合使用，以符合浏览器策略。poster: 指定在视频下载或用户点击播放按钮之前显示的图像。这充当一个占位符。width和height: 以像素为单位设置视频播放器的尺寸。通常最好使用 CSS 进行尺寸控制，以实现响应式设计。
带有多个属性的示例：
“`html
“`
提供多个视频源 (<source> 标签)
不同的浏览器支持不同的视频格式。为了确保您的视频在所有主流浏览器中播放，您应该提供多种格式（例如，MP4、WebM、Ogg）的多个源文件。浏览器将自动选择它支持的第一个格式。
<source> 标签在 <video> 标签内部使用，每个 <source> 标签指定一个不同的视频文件。
src: 视频文件的路径。type: 指定视频的 MIME 类型（例如，video/mp4、video/webm、video/ogg）。这有助于浏览器决定是否可以在不先下载文件的情况下播放它。
如果浏览器根本不支持 <video> 标签，则会显示直接放置在 <video> 标签内部（但在 <source> 标签之后）的任何文本。
示例：
“`html
“`
使用 <track> 进行可访问性（字幕/副标题）
使您的视频可访问至关重要。<track> 标签允许您向视频添加文本轨道，例如字幕、副标题、描述或章节。这些轨道通常存储在 WebVTT (.vtt) 文件中。
src: WebVTT 文件的路径。kind: 指定轨道的类型。常见值包括：captions: 对话和音效的转录，供听障人士使用。subtitles: 视频的对话翻译，供不理解主要语言的观众使用。descriptions: 视频视觉内容的文本描述，供视障人士使用。chapters: 章节标题，用于导航。
srclang: 指定轨道的语言（例如，en代表英语，es代表西班牙语）。label: 轨道的用户可读标题，显示在浏览器的视频控件中。default: 如果存在，此轨道将默认启用。
示例：
首先，创建一个 WebVTT 文件（例如，captions_en.vtt）：
“`vtt
WEBVTT
1
00:00:01.000 –> 00:00:04.000
Hello, and welcome to this tutorial!
2
00:00:05.000 –> 00:00:08.000
We are learning about HTML video.
“`
然后，在您的 HTML 中链接它：
“`html
“`
基本样式设置
虽然 width 和 height 属性可以设置视频尺寸，但使用 CSS 提供更大的灵活性，尤其适用于响应式设计。
“`html
响应式 HTML 视频
“`
结论
HTML <video> 标签是用于在网页上嵌入多媒体内容的功能强大且灵活的工具。通过了解其基本用法、常用属性以及如何提供多个源和可访问性功能，您可以创建丰富且引人入胜的用户体验。开始尝试这些功能，让您的网络内容栩栩如生！