当前位置：首页 > 行业动态 > 正文

html插入视频

admin
行业动态
2025-04-30
6

使用` 标签插入视频，设置src 路径并添加controls 属性，如`，支持自动播放、循环等参数，兼容主流浏览器

HTML5 `<video>` 标签基础用法

HTML5 提供原生 <video> 标签，支持直接嵌入视频，语法简洁且兼容性较好。

属性	说明
`src`	指定视频文件路径（必填）
`controls`	显示默认播放控件（播放/暂停、音量、进度条等）
`autoplay`	自动播放（部分浏览器限制需配合 `muted`）
`loop`	循环播放
`muted`	静音播放（配合 `autoplay` 提升兼容性）
`poster`	指定视频封面图（未播放时显示）
`width`/`height`	设置视频宽度/高度（可省略，由视频本身尺寸决定）

基础示例：

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

多格式兼容方案

不同浏览器对视频格式支持不同,需通过 <source> 标签提供多种格式备选。

html插入视频第1张

格式	主流浏览器支持
MP4 (`.mp4`)	Chrome, Firefox, IE11+, Safari, Edge
WebM (`.webm`)	Chrome, Firefox, Opera
Ogg (`.ogv`)	Firefox, Chrome（部分版本）

多格式示例：

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  您的浏览器不支持 HTML5 视频播放。
</video>

自定义控件与样式

若需自定义播放控件或样式,可通过 JavaScript 或 CSS 覆盖默认行为。

隐藏默认控件 + 自定义按钮：

%ignore_pre_ 3%

使用 CSS 调整样式：

video {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

响应式设计与移动端适配

通过 CSS 或 <picture> 实现自适应不同设备。

使用 `max-width` 限制宽度：

video {
  max-width: 100%;
  height: auto;
}

动态切换分辨率（`<picture>`）：

<picture>
  <source media="(min-width: 768px)" srcset="video-720p.mp4">
  <source media="(max-width: 767px)" srcset="video-480p.mp4">
  <video controls autoplay>
    您的浏览器不支持 HTML5 视频。
  </video>
</picture>

常见问题与解答

问题1：如何让视频自动播放且兼容主流浏览器？

解答：

现代浏览器（如 Chrome、Safari）要求自动播放的视频必须静音（添加 muted 属性）。
同时建议添加 playsinline 属性（移动端生效，防止全屏自动播放）。
示例：
```
<video src="video.mp4" autoplay muted playsinline loop></video>
```