Angular应用中Safari 17忽略playsInline，首次进入视频自动全屏问题

• Safari 17的MediaStream初始化时序bug：首次通过srcObject给视频元素绑定MediaStream时，Safari 17的渲染引擎未正确处理playsInline属性的优先级，直接触发浏览器默认的全屏播放行为，而非遵循内嵌播放设置。
• Angular组件状态的复用差异：导航到其他页面再返回时，Angular的路由复用机制保留了视频元素的DOM状态，此时playsInline已被正确识别并生效；但新开标签页时组件是全新初始化的，DOM元素从头构建，再次触发了Safari的这个时序问题。
• MediaStream异步加载的同步冲突：MediaStream属于流式数据，首次加载时视频元素的属性初始化流程和流的就绪状态不同步。Safari在流首次就绪时，会跳过已设置的playsInline配置，直接启动全屏播放。

临时修复建议 #

• 延迟绑定srcObject：组件初始化后，通过setTimeout延迟100-200ms再赋值MediaStream，确保playsInline属性已被浏览器正确解析。
• 同时添加WebKit前缀属性：给视频元素同时设置playsinline和webkit-playsinline属性，提升Safari下的兼容性。
• 手动校验播放状态：在调用video.play()前，先确认video.playsInline为true，再执行播放操作。

内容的提问来源于stack exchange，提问作者davidinteract