html5 css video

作者：风中孤狼发布日期:2026-02-08 浏览:114

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 CSS Video Example</title>
    <style>
        /* 设置视频容器的样式 */
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        /* 设置视频的基本样式 */
        video {
            width: 100%;
            height: auto;
            border: 2px solid #333;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <!-- 使用 HTML5 的 <video> 标签嵌入视频 -->
        <video controls>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</body>
</html>

解释说明：

HTML5 <video> 标签：用于嵌入视频文件。controls 属性为视频添加了播放、暂停和音量控制。
CSS 样式：
- .video-container 类设置了视频容器的宽度和居中对齐。
- video 标签的样式设置了视频的宽度为 100%，并保持宽高比，同时添加了边框和圆角效果。
视频源：<source> 标签指定了视频文件的路径和类型（如 MP4）。如果浏览器不支持该标签，则会显示 "Your browser does not support the video tag." 这段文本。

上一篇：html文件指什么

下一篇：html 空格