在html页面中嵌入视频并实现在谷歌浏览器中正常播放，核心是使用HTML5的video标签，同时需要匹配浏览器支持的视频格式和正确的属性配置。谷歌浏览器对视频格式的兼容性有明确的范围，不符合要求的视频文件会直接无法加载播放。
video标签的基础用法
HTML5提供了原生的<video>标签用于嵌入视频，无需依赖第三方插件即可实现基础播放功能。基础的结构如下：
<video width="640" height="360" controls> <source src="video_demo.mp4" type="video/mp4"> 您的浏览器不支持video标签播放视频 </video>
上面的代码中，<video>标签的width和height设置视频显示尺寸，controls属性会显示浏览器默认的播放控制栏，包含播放暂停、进度条、音量调节等按钮。<source>标签用于指定视频文件的路径和格式，浏览器会按照顺序尝试加载，直到找到可播放的格式。
谷歌浏览器支持的视频格式
谷歌浏览器对视频格式的兼容性有一定限制，目前主要支持以下格式：
- MP4：编码为H.264视频编码+AAC音频编码，是最推荐使用的格式，兼容性最好
- WebM：编码为VP8/VP9视频编码+Vorbis/Opus音频编码，是谷歌主推的开放格式
- Ogg：编码为Theora视频编码+Vorbis音频编码，兼容性稍弱
如果视频文件的编码不符合上述要求，即使后缀名正确，也无法在谷歌浏览器中播放。例如很多从设备直接导出的MP4文件可能使用了H.265编码，这种格式在谷歌浏览器中默认不支持，需要转码为H.264编码的MP4文件。
常用属性配置
除了基础的controls属性，<video>标签还有很多实用的属性可以优化播放体验：
| 属性名 | 作用说明 |
|---|---|
| autoplay | 页面加载后自动播放视频，谷歌浏览器中需要配合muted属性才能生效，否则会被浏览器策略阻止 |
| muted | 默认静音播放，配合autoplay可实现自动播放效果 |
| loop | 视频播放结束后自动循环播放 |
| preload | 设置视频预加载策略，可选值有none（不预加载）、metadata（只加载元数据）、auto（自动预加载） |
| poster | 设置视频封面图，在视频加载或播放前显示 |
实现自动播放的示例代码：
<video width="640" height="360" autoplay muted loop poster="cover.jpg"> <source src="video_demo.mp4" type="video/mp4"> <source src="video_demo.webm" type="video/webm"> 您的浏览器不支持video标签播放视频 </video>
常见问题排查
如果遇到视频在谷歌浏览器中无法播放的情况，可以按照以下步骤排查：
- 检查视频文件路径是否正确，可通过浏览器开发者工具的Network面板查看视频请求是否成功，返回状态码是否为200
- 检查视频格式和编码是否符合谷歌浏览器要求，可使用格式工厂等工具转码为H.264编码的MP4文件
- 检查是否存在跨域问题，如果视频文件放在其他域名下，需要服务端配置CORS允许跨域访问
- 检查是否触发了浏览器的自动播放策略，若需要自动播放必须添加muted属性
- 清除浏览器缓存后重新测试，避免旧缓存文件影响测试结果
JavaScript控制播放
除了标签属性，还可以通过JavaScript控制视频的播放行为，示例如下：
// 获取video元素
const videoElement = document.querySelector('video');
// 播放视频
function playVideo() {
videoElement.play().catch(err => {
console.log('播放失败：', err);
});
}
// 暂停视频
function pauseVideo() {
videoElement.pause();
}
// 监听播放事件
videoElement.addEventListener('play', () => {
console.log('视频开始播放');
});
// 监听暂停事件
videoElement.addEventListener('pause', () => {
console.log('视频已暂停');
});
使用play()方法时需要注意，如果浏览器阻止了自动播放，该方法会返回Promise拒绝状态，需要捕获异常避免报错。