HTML5 视频

HTML5 中提供了一种内置的方式来呈现视频 - 视频标签。该标签允许开发人员在网页中轻松地嵌入视频，并为用户提供一个无缝的观看体验。

视频标签

视频标签是一个新的 HTML5 标签，用于嵌入和播放视频。它的格式如下:

<video src="video.mp4" controls></video>

其中，src 属性指定视频文件的路径，controls 属性允许控制视频播放和暂停。其他常用属性还有 autoplay（自动播放）、loop（循环播放）、width 和 height（视频尺寸）等。

支持的视频格式

HTML5 视频标签支持多种视频格式，包括 MP4、WebM 和 Ogg。以下是一些常用格式的示例:

<!-- MP4 格式 -->
<video src="video.mp4" controls></video>

<!-- WebM 格式 -->
<video src="video.webm" controls></video>

<!-- Ogg 格式 -->
<video src="video.ogg" controls></video>

为了兼容不同的浏览器和设备，建议同时提供多个格式的视频文件。如果用户的浏览器不支持某种格式，则会自动尝试使用其他格式。

视频的自适应大小

为了适应不同的浏览器窗口大小和设备屏幕，需要在视频标签中指定宽度和高度。为了使视频可以自动调整大小以适应窗口或设备大小，我们可以使用一些 CSS 技巧。

以下示例代码将视频的宽度设置为100%，并在浏览器窗口大小改变时自动调整大小。

<style>
    video {
        width: 100%;
        height: auto;
    }
</style>

<video src="video.mp4" controls></video>

视频的响应式设计

为了使视频在不同大小的设备上都能够正常显示，我们可以使用响应式设计的技巧。

以下是一个响应式的视频示例：

<style>
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="video-container">
    <video src="video.mp4" controls></video>
</div>

该示例使用了一个外层容器 video-container，并为其设置一个固定的高度。内部的视频标签使用绝对定位，并设置宽度和高度为100%。为了保证视频的宽高比例不变，我们使用 padding-bottom 属性设置容器的高度，具体的值为视频的高宽比。

结论

HTML5 视频标签是在线视频播放的必备工具，它可以帮助开发人员轻松地在网页中嵌入视频，并为用户提供出色的观看体验。为了使用户能够在不同的设备上正常观看视频，我们需要结合 CSS 技巧来实现自适应大小和响应式设计。