HTML5视频标签用法_HTML5 video标签视频嵌入与属性设置

html5的video标签可标准嵌入视频，支持controls、autoplay、muted等属性，通过source指定MP4/WebM等格式多源备用，结合javaScript实现播放控制与事件监听，确保兼容性与交互性。

在网页中嵌入视频，html5 的 video 标签提供了一种标准、无需插件的方式。相比以前依赖 Flash 等技术，现在可以直接通过简单的标签将视频集成到页面中，兼容性好且易于控制。

基本语法与视频嵌入

使用 video 标签嵌入视频非常简单，只需指定视频文件的路径即可。常用格式包括 MP4（H.264）、WebM 和 Ogg。

示例代码：

<video controls>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.webm” type=”video/webm”>
  您的浏览器不支持 video 标签。
</video>

说明： – controls 属性用于显示播放、音量、全屏等控制条。 – source 标签允许提供多个视频源，浏览器会自动选择第一个支持的格式。 – 标签内的文字是后备内容，仅在不支持 video 的浏览器中显示。

常用属性设置

video 支持多种属性，可控制播放行为和用户体验。

• autoplay：视频就绪后自动播放（部分浏览器限制静音 autoplay）
• loop：循环播放视频
• muted：静音播放，常与 autoplay 搭配使用以绕过自动播放策略
• preload：指定视频预加载方式，可选值：
    – “none”：不预加载
    – “metadata”：只加载元数据（推荐）
    – “auto”：尽量加载全部视频
• width 和 height：设置播放器尺寸，单位为像素或百分比
• poster：指定视频加载前显示的封面图片

带属性的完整示例：

<video width=”640″ height=”360″ controls autoplay muted loop preload=”metadata” poster=”cover.jpg”>
  <source src=”demo.mp4″ type=”video/mp4″>
  <source src=”demo.webm” type=”video/webm”>
  您的浏览器不支持 video 标签。
</video>

javascript 控制视频播放

通过 JavaScript 可以动态控制视频的播放状态，实现更灵活的交互。

立即学习“前端免费学习笔记（深入）”；

模力视频

模力视频 – AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板

51

查看详情

常见操作示例：

const video = document.querySelector(‘video’);
video.play();  // 播放
video.pause();  // 暂停
video.volume = 0.5;  // 设置音量为 50%
video.currentTime = 10;  // 跳转到第 10 秒

也可以监听事件，比如播放结束：

video.addEventListener(‘ended’, function() {
  alert(‘视频播放完毕’);
});

基本上就这些。掌握 video 标签的基本用法、关键属性和简单脚本控制，就能在网页中高效嵌入并管理视频内容。注意格式兼容性和自动播放策略，确保在不同设备和浏览器中正常运行。