想在网页里嵌入视频？其实HTML5早就把这事儿安排得明明白白的——直接用原生元素就行，既不用装插件，也不用担心跨设备兼容。下面就把具体步骤和常用技巧捋一遍，跟着操作就能上手。

一、基础视频标签结构

核心就是这个容器。它能管住播放行为，还能通过子元素提供备用内容或多个视频源。先把标签结构搭对，后续才不愁浏览器不买账。

• 1. 在HTML文档的正文里插入标签，顺手写上width和height定义显示尺寸。
• 2. 用src属性指向一个MP4视频文件，比如src="example.mp4"。
• 3. 加上controls属性，浏览器会自动给你配上播放/暂停、音量、进度条这些控件。
• 4. 在标签内部写上一段降级提示，比如

  您的浏览器不支持 video 标签

  ，这样老浏览器也能有个交代。

二、多格式兼容性处理

浏览器对视频编码的支持实在不统一。只给一种格式，总有一部分用户看不了。解决办法是用子元素按优先级列出多种格式，谁认谁上。

• 1. 把上的src属性去掉，换成嵌套的元素。
• 2. 第一个用MP4（H.264编码），Safari、Chrome、Edge和iOS设备都认它。
• 3. 第二个用WebM（VP8/VP9编码），Firefox、Chrome和Opera支持得不错。
• 4. 第三个用OGG（Theora编码），给老版Firefox当备胎。
• 5. 每个都要带上type属性，比如type="video/mp4"。这样浏览器能快速判断能不能播。

三、自定义播放行为与属性配置

HTML5视频标签有一堆布尔属性和枚举属性，可以精细控制初始状态和用户交互逻辑，免得默认行为打乱页面节奏。

• 1. 加个autoplay，视频加载完自动开播。注意：现在多数浏览器要求同时加上muted才能自动播放。
• 2. 加muted强制静音，满足自动播放策略。
• 3. 加loop让视频播完自动从头循环，适合做背景视频。
• 4. 用preload="metadata"只预加载元数据（时长、尺寸、首帧），能省点带宽。
• 5. 用poster指定封面图路径，比如poster="cover.jpg"，加载前先显示一张图。

四、JavaScript 动态控制视频

通过DOM API拿到元素后，就可以用JavaScript随心所欲地控制播放、暂停、跳转、调音量。这样能实现更灵活的交互。

• 1. 用document.getElementById()或querySelector()获取视频元素。
• 2. 调用.play()启动播放，.pause()暂停。
• 3. 设置.currentTime属性跳到指定时间点（单位秒），比如video.currentTime = 30;。
• 4. 调整.volume属性控制音量（0.0到1.0），比如video.volume = 0.7;。
• 5. 监听ended事件，播放结束时触发回调，比如video.addEventListener('ended', () => { alert('播放完成'); });。

五、响应式视频嵌入方案

移动端屏幕大小不一，必须结合CSS让视频容器自适应，保持比例不变形。

• 1. 给外面包一层
  容器，设置类名比如video-wrapper。
• 2. CSS中把容器设为相对定位，用padding-top百分比模拟宽高比（比如56.25%对应16:9）。
• 3. 把设为绝对定位，宽高都100%，填满容器。
• 4. 加max-width: 100%和height: auto，防止视频溢出父级边界。
• 5. 移动设备上再启用object-fit: contain，确保视频内容完整可见，不会被裁掉。

《夸克》非常好用的免费AI浏览器

下载APP查看