HTML5的video标签可标准嵌入视频，支持controls、autoplay、muted等属性，通过source指定MP4/WebM等格式多源备用，结合JavaScript实现播放控制与事件监听，确保兼容性与交互性。
在网页中嵌入视频，HTML5 的 video 标签提供了一种标准、无需插件的方式。相比以前依赖 Flash 等技术，现在可以直接通过简单的标签将视频集成到页面中，兼容性好且易于控制。
基本语法与视频嵌入
使用 video 标签嵌入视频非常简单，只需指定视频文件的路径即可。常用格式包括 MP4（H.264）、WebM 和 Ogg。
示例代码：
说明： - controls 属性用于显示播放、音量、全屏等控制条。 - source 标签允许提供多个视频源，浏览器会自动选择第一个支持的格式。 - 标签内的文字是后备内容，仅在不支持 video 的浏览器中显示。
常用属性设置
video 支持多种属性，可控制播放行为和用户体验。
- autoplay：视频就绪后自动播放（部分浏览器限制静音 autoplay）
- loop：循环播放视频
- muted：静音播放，常与 autoplay 搭配使用以绕过自动播放策略
-
preload：指定视频预加载方式，可选值：
- "none"：不预加载
- "metadata"：只加载元数据（推荐）
- "auto"：尽量加载全部视频 - width 和 height：设置播放器尺寸，单位为像素或百分比
- poster：指定视频加载前显示的封面图片
JavaScript 控制视频播放
通过 JavaScript 可以动态控制视频的播放状态，实现更灵活的交互。
立即学习“前端免费学习笔记（深入）”；
常见操作示例：
const video = document.querySelector('video');
video.play(); // 播放
video.pause(); // 暂停
video.volume = 0.5; // 设置音量为 50%
video.currentTime = 10; // 跳转到第 10 秒
也可以监听事件，比如播放结束：
video.addEventListener('ended', function() {
alert('视频播放完毕');
});
基本上就这些。掌握 video 标签的基本用法、关键属性和简单脚本控制，就能在网页中高效嵌入并管理视频内容。注意格式兼容性和自动播放策略，确保在不同设备和浏览器中正常运行。
