HTML Video 在 Vue 中消失的 muted 属性
内容提要
在 Nuxt 项目中，首页全屏 video 元素通过 autoplay 和 muted 实现自动播放，但切换路由再返回后 muted 属性消失，导致自动播放失效。测试路由缓存和动态绑定均无效，发现是 Vue 的已知 issue。最终在 onMounted 中操作 DOM 手动调用 video.play() 解决。
延伸解读
问题根源：Vue 的已知 issue
文章指出，muted 属性消失是 Vue 的已知 issue，在 GitHub 上自 2022 年 10 月创建后仍未关闭。有评论认为 Vue 不应破坏原生浏览器功能，暗示这可能是框架缺陷。这提醒开发者，遇到类似属性丢失时，可优先排查框架 issue，而非仅归咎于路由或缓存。
为何常规方案无效
作者测试了路由切换方法、keepalive 缓存以及 v-bind 动态绑定 muted，均未解决问题。甚至在纯 Vue 项目中，首次加载就丢失 muted，但视频仍能自动播放，说明问题与 Nuxt 路由无直接关联，而是 Vue 本身对 muted 属性的处理异常。
临时解决方案与局限
最终方案是在 onMounted 中通过 DOM 操作获取所有 video 元素并手动调用 play()。这能恢复自动播放，但作者认为并非根本解决，核心问题仍在框架层面。此方案适用于紧急修复，但可能掩盖属性丢失的深层原因，且需注意多个视频元素的处理。
Q&A
在Vue或Nuxt项目中，video元素的muted属性为什么会消失？
这是Vue的一个已知issue，当路由切换后返回时，Vue可能会移除video元素上的muted属性，导致自动播放失效。该问题在Vue的GitHub仓库中有记录，但尚未解决。
如何解决Vue中video的muted属性消失导致自动播放失效的问题？
可以在onMounted生命周期钩子中，通过document.getElementsByTagName('video')获取所有video元素，并手动调用video.play()来触发播放。
尝试用keepalive或动态绑定muted属性为什么不能解决video自动播放失效？
设置keepalive: true可能引入其他bug且未解决muted消失问题；动态绑定muted属性（如: muted="true"）也无效，因为Vue可能不会正确保留该属性。
在纯Vue项目中，video的muted属性也会消失吗？
是的，在纯Vue项目中测试发现，首次加载时muted属性就会消失，但视频仍能自动播放，问题表现与Nuxt中略有不同。
Vue的GitHub issue中关于muted属性消失的问题是什么状态？
该issue创建于2022年10月12日，至今仍未关闭。有评论指出Vue不应破坏原生浏览器功能，但问题可能确实是Vue.js的Bug。
除了操作DOM，还有其他方法解决Vue中video自动播放失效吗？
文章中提到的方法是在onMounted中操作DOM调用play()，其他方法如路由缓存、动态绑定均无效，作者认为问题核心在框架层面，但未提供其他解决方案。
