Chrome（Android）中Angular 2+组件内视频自动播放失效问题咨询

我之前也踩过这个坑，给你整理下实际测试下来的情况：

无效场景 #

把带有autoplay属性的<video>标签直接放在Angular 2+组件模板中，在移动端尝试实现自动播放时完全无法生效。

有效场景 #

• 将<video>标签直接移至index.html（Angular组件外部的根页面）
• 在组件内部通过代码将<video>标签追加到<body>元素中
• 在组件模板中保留<video>标签并启用controls属性，让用户手动点击播放按钮（注：此方式不属于自动播放，但能正常触发视频播放）

我的推测 #

我认为这并非视频路径无效的问题——大概率是Angular组件的DOM渲染机制结合移动端浏览器的自动播放限制导致的。现在移动端浏览器对自动播放有严格的策略，通常要求必须由用户交互触发；而Angular组件内部的DOM元素可能在初始化阶段没有满足浏览器的自动播放触发条件，而放在index.html或直接追加到<body>的元素，可能在页面加载流程中更早被浏览器处理，从而避开了组件渲染时的限制。

内容的提问来源于stack exchange，提问作者Adam T. Doyle