HTML 是用于构建网页的标准标记语言，而在 HTML5 中引入的 <video> 标签，使得开发者可以在网页中直接嵌入视频，而不再需要依赖第三方插件，比如 Flash。这大大提高了视频播放的标准化以及兼容性。以下是有关 <video> 标签使用方法和相关属性的详细说明。
基本用法
HTML5 的 <video> 标签是一个容器，它允许你在网页中嵌入视频文件。它可以与多个属性结合使用，以便自定义视频的显示和播放行为。
基本结构 <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>属性详解
controls
controls 属性是一个布尔属性。当添加时，浏览器会在视频播放器上显示默认的播放控件，包括播放/暂停按钮、音量控制、进度条等。
<video controls> <source src="movie.mp4" type="video/mp4"> </video>autoplay
autoplay 属性使视频在加载时自动播放。需要注意的是，为了改善用户体验和减少不必要的流量消耗，现代浏览器通常只允许静音的自动播放。
<video autoplay muted> <source src="movie.mp4" type="video/mp4"> </video>loop
loop 属性是一个布尔属性，表示视频播放结束时，会重新开始。
<video loop> <source src="movie.mp4" type="video/mp4"> </video>muted
muted 属性表示视频在初始状态下静音。
<video muted> <source src="movie.mp4" type="video/mp4"> </video>preload
preload 属性的用途是为浏览器提供有关视频应该如何加载的提示。它有三个可能的值：
none：不加载视频数据。 metadata：仅加载元数据，如视频长度和尺寸。 auto：尽可能多地下载视频。 <video preload="auto"> <source src="movie.mp4" type="video/mp4"> </video>poster
poster 属性允许开发者指定在视频播放之前的封面图像。
<video poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> </video>多媒体格式支持
由于不同浏览器支持的视频格式不同，因此在实践中，我们通常提供多个视频格式，以确保跨浏览器兼容性。常用的视频格式如下：
MP4 (video/mp4): 广泛支持，包括大多数主流浏览器。 WebM (video/webm): 被认为是开放格式，主要支持在 Chrome 和 Firefox 中。 Ogg (video/ogg): 支持 Firefox、Chrome 和 Opera。视频的顺序选择机制
浏览器会从上到下加载 <source> 标签，一旦找到了能播放的格式，便会停止加载后面的格式。因此，正确的顺序可以提升加载效率。
JavaScript API
通过 JavaScript，我们可以进一步控制视频标签。例如，可以用于播放、暂停视频，或者获取和设置播放位置等。
示例代码 <video id="myVideo" width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大尺寸</button> <button onclick="makeNormal()">正常尺寸</button> <button onclick="makeSmall()">小尺寸</button> <script> var myVideo = document.getElementById("myVideo"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeNormal() { myVideo.width = 320; } function makeSmall() { myVideo.width = 160; } </script>注意事项
兼容性: 虽然 <video> 标签改善了视频播放的标准化，但开发者仍需考虑不同浏览器的兼容性问题，比如 Safari 可能需要进行额外的格式支持测试。
性能: 在带宽有限的环境下，考虑使用合适的 preload 属性值。为了优化加载速度和减少流量消耗，谨慎使用 autoplay。
浏览器限制: 出于用户体验和隐私保护的考虑，许多浏览器对自动播放设置了限制条件，通常需要将视频静音才能自动播放。
替代内容: 提供替代内容，以在视频无法播放时向用户展示帮助信息。
通过结合这些属性和技术，开发者可以在 Web 应用中提供丰富的视频体验，从而提升用户的互动性和参与度。