HTML Video 在 Vue.js 中消失的 muted 属性
内容提要
在Nuxt/Vue项目中，video元素的muted属性在路由切换后消失，导致自动播放失效。测试路由方法、keep-alive和动态绑定均无效，最终通过在onMounted中操作DOM调用video.play()解决，并推测这是Vue.js的Bug。
延伸解读
问题复现与影响范围
文章描述在Nuxt/Vue项目中，video元素的muted属性在路由切换后消失，导致自动播放失效。作者测试了多种路由方法、keep-alive和动态绑定，均无效。这表明问题可能不仅限于特定路由方式，而是与Vue对DOM属性的处理机制有关。对于依赖自动播放的页面，这会导致功能中断，影响用户体验。
临时解决方案的利弊
作者最终在onMounted中通过DOM操作调用video.play()解决。这种方法直接有效，能恢复自动播放，但属于绕过框架的hack，可能掩盖根本问题。此外，它依赖于组件挂载时机，若视频元素动态添加或存在多个视频，需额外处理。长期来看，仍需关注Vue官方修复。
社区反馈与可能原因
作者在Vue的GitHub仓库找到类似issue，自2022年10月创建仍未关闭，有评论指出Vue不应破坏原生浏览器功能。这暗示问题可能源于Vue在更新DOM时移除了muted属性，而非浏览器行为。虽然作者推测是Vue.js的Bug，但也不排除框架设计如此，需进一步验证。
Q&A
在Vue.js项目中，video元素的muted属性为什么会消失？
在Nuxt/Vue项目中，当路由切换后，video元素的muted属性会消失，导致自动播放失效。这可能是Vue.js的一个Bug，在Vue的GitHub仓库中有相关未解决的issue。
如何解决Vue中video的muted属性消失导致自动播放失效的问题？
可以在onMounted生命周期钩子中，通过document.getElementsByTagName('video')获取所有video元素，并依次调用video.play()来触发播放。
尝试了哪些方法来解决muted属性消失的问题？
尝试了使用Nuxt的navigateTo()和Vue的$router.push()进行路由切换、设置keepalive: true进行路由缓存、通过v-bind动态绑定muted属性，但这些方法均无效。
为什么在Vue中动态绑定muted属性无效？
动态绑定muted属性（如: muted="true"）无法阻止muted属性在路由切换后消失，这可能是Vue.js框架本身的问题，有issue指出Vue不应破坏原生浏览器功能。
在纯Vue项目中，video的muted属性消失后视频还能自动播放吗？
在纯Vue项目中，首次加载时muted属性就会消失，但视频仍能自动播放，这与Nuxt项目中的表现不同。
Vue.js官方是否承认muted属性消失是一个Bug？
在Vue的GitHub仓库中有一个2022年10月12日创建的未关闭issue，有人指出Vue不应破坏原生浏览器功能，但可能这确实是Vue.js的Bug。
