什么是 HTML 视频？

HTML 视频指在网页中嵌入视频文件并实现播放的功能。

通过使用 HTML5 提供的

要在网页中嵌入视频文件，可以使用

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频标签。

属性

解释

src

指定视频文件的路径（可以是相对路径或绝对路径）。

controls

添加播放、暂停、音量控制等控件到视频播放器中。

autoplay

视频在加载后自动播放（某些浏览器可能需要与muted属性一起使用）。

loop

视频播放结束后重新开始播放。

muted

视频静音播放。

poster

指定视频封面图片，在视频播放前显示。

width 和 height

设置视频播放器的宽度和高度。

标签内文本内容

如果浏览器不支持

不同浏览器支持的视频格式可能不同，可以通过标签提供多种格式的视频文件：

实例代码

运行代码

复制

您的浏览器不支持视频元素。

浏览器会按顺序尝试播放第一个支持格式的视频。

使用 width 和 height 属性设置视频的显示尺寸：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

如果你希望视频在页面加载时自动播放，可以使用autoplay属性：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

注意：许多浏览器会阻止自动播放，尤其是带有声音的视频。

如果你希望视频循环播放，可以使用loop属性：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

使用muted属性让视频静音播放：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

使用poster属性设置视频封面图片：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

使用preload属性控制视频的预加载行为：

auto：浏览器会自动预加载视频文件（默认值）。

metadata：只预加载视频文件的元数据（如时长）。

none：不预加载视频文件。

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频元素。

使用 CSS 使视频在不同设备上自适应：

实例代码

运行代码

复制

视频示例

视频示例

您的浏览器不支持视频元素。

可以通过 JavaScript 控制视频的播放、暂停等操作：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频标签。

播放

暂停

可以通过 JavaScript 监听视频事件，如播放结束：

实例代码

运行代码

复制

视频示例

您的浏览器不支持视频标签。

HTML 音频（Audio）HTML5 教程

评论区 0

发表评论

发表评论