手机HTML5视频需添加autoplay、muted、playsinline（及webkit-playsinline）属性，使用H.264 Baseline+MP4格式，配置CORS与Range支持，并通过用户手势或JS调用play()方法触发播放。
如果您在手机浏览器中打开HTML5视频链接时无法自动播放，或点击后仍无响应，则可能是由于浏览器策略限制、视频格式不兼容或缺少必要属性。以下是实现HTML5视频在手机浏览器中直接播放的操作方法：
一、确保HTML5视频标签包含必要属性
移动端浏览器（尤其是iOS Safari和Android Chrome）默认禁止自动播放带声音的视频，必须显式添加特定属性才能触发直接播放行为。需同时满足静音与自动播放条件。
1、在标签中添加autoplay属性。
2、在标签中添加muted属性。
立即学习“前端免费学习笔记（深入）”；
3、在标签中添加playsinline属性（防止iOS全屏播放）。
4、确保src指向可直接访问的MP4文件（H.264编码+AAC音频），或使用type="video/mp4"。
5、示例代码：。
二、使用JavaScript触发播放以绕过用户手势限制
部分安卓浏览器或新版iOS Safari要求播放操作必须由用户真实手势（如touchend）触发，仅靠页面加载无法启动。需绑定事件监听并调用play()方法。
1、为元素设置id="myVideo"。
2、在页面底部或中添加：document.getElementById('myVideo').play().catch(e => console.log('播放被阻止：', e));。
3、若需用户点击后播放，绑定touchstart或click事件：button.addEventListener('touchstart', () => myVideo.play());。
三、检查视频资源是否支持跨域与流式传输
手机浏览器对视频资源有严格CORS策略，若视频位于不同域名且未配置Access-Control-Allow-Origin响应头，将导致加载失败或播放中断。
1、确认服务器返回的HTTP响应头中包含：Access-Control-Allow-Origin: * 或具体域名。
2、验证视频是否支持HTTP Range请求（即支持分段加载），可通过curl命令检查响应头是否含Accept-Ranges: bytes。
3、避免使用重定向后的视频URL，某些浏览器会丢弃原始请求头导致CORS失效。
四、适配不同手机浏览器的特殊处理
iOS Safari对autoplay极为严格，即使加了muted也可能因页面未完全可见而暂停；Android Chrome则可能因省电模式禁用后台媒体解码。
1、对iOS设备，添加webkit-playsinline属性：。
2、对Android Chrome，确保中未启用user-scalable=no，否则可能影响触摸事件触发。
3、在中加入：apple-mobile-web-app-capable" content="yes">，提升Safari内嵌体验。
五、验证视频编码与容器格式兼容性
并非所有MP4文件都能被手机浏览器识别，关键在于编码参数是否符合标准。H.264 Baseline Profile与AAC LC是兼容性最广的组合。
1、使用FFmpeg检测编码信息：ffprobe -v quiet -show_entries stream=codec_name,profile,width,height,r_frame_rate -of default video.mp4。
2、若输出显示profile=High，需转码为Baseline：ffmpeg -i in.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac out.mp4。
3、避免使用WebM/AV1格式，除非明确目标设备为Chrome for Android 9+且已测试通过。
