HTML5视频无法播放需检查controls属性、src路径、preload设置、多源适配及CSS干扰；正确配置可实现点击播放与控制栏显示。
如果您在网页中嵌入HTML5视频但无法正常播放，可能是由于video标签属性设置不完整或视频文件路径不正确。以下是实现HTML5视频点击播放并显示控制栏的多种方法：
一、基础video标签结构与controls属性启用
video标签需包含controls属性以渲染默认播放控件（如播放/暂停、音量、进度条），否则用户无法通过界面交互触发播放。同时必须指定合法的src属性值指向可访问的视频资源。
1、在HTML文档中插入video标签，并添加controls属性。
2、为src属性赋值为本地相对路径或绝对URL的MP4、WebM或OGV格式视频文件。
立即学习“前端免费学习笔记（深入）”；
3、确保video标签闭合，且无语法错误（如未闭合标签或引号缺失）。
4、在浏览器中打开页面，点击播放按钮即可启动视频。
二、显式调用play()方法触发自动播放（需用户手势）
现代浏览器禁止无用户交互的自动播放，但可在用户点击按钮后通过JavaScript调用play()方法启动视频，适用于需要自定义UI的场景。
1、为video元素设置id属性，例如id="myVideo"。
2、添加一个button元素，文字为“播放”，并绑定onclick事件。
3、在事件处理函数中获取video元素，调用其play()方法。
4、首次播放必须由用户点击触发，否则将被浏览器静音或拒绝执行。
三、预加载策略与preload属性配置
preload属性影响视频资源加载时机，设置为"metadata"可提前获取时长、尺寸等信息，使controls中的时间轴和播放按钮更快响应。
1、在video标签中添加preload="metadata"属性。
2、保留controls属性不变，确保播放控件可见。
3、检查网络面板确认视频元数据是否成功加载，而非整个文件体。
4、若设为preload="none"，则首次点击播放时可能出现短暂延迟。
四、多源适配与source标签嵌套
不同浏览器对视频编码格式支持存在差异，使用多个source子元素可提供备用格式，提升兼容性。
1、在video标签内部依次添加多个source标签。
2、每个source标签设置src属性指向不同编码格式的同一视频（如MP4、WebM）。
3、为每个source指定type属性，例如type="video/mp4"或type="video/webm"。
4、浏览器将按顺序尝试加载首个支持格式的source，失败则跳至下一个。
五、解决controls不显示或点击无响应的问题
controls控件不可见或点击无效常由CSS样式覆盖、video标签宽高为0、或跨域资源限制导致。
1、检查video元素是否被CSS设置为display:none、visibility:hidden或height:0。
2、确认video标签具有明确的width和height属性或CSS尺寸声明。
3、若视频来自跨域服务器，需确保服务端返回Access-Control-Allow-Origin头信息。
4、移除可能干扰控件渲染的transform、opacity或pointer-events CSS规则。
