HTML Video 在 Vue 中消失的 muted 屬性

公司有個新專案由我這邊獨立選型開發，專案需求是製作一個英文的產品展示官網，考慮到專案比較簡單且週期不長，最終決定使用 Nuxt 框架來進行開發。

開發過程還算順利，但中途遇到一個 Bug 花了我不少時間，在網路上找了許久，僅能檢索到極少數相關內容，都是在 Vue 的 Github 儲存庫中的 issues，且最終仍未能找到問題所在，當然這也許並不是 Bug，而是框架本身就是這樣設計的。

以下是我的解決思路，如果各位大佬有其他見解，請指出交流。

問題現象

在產品展示的官網首頁有一個全螢幕的 video 元素，影片預設自動播放，在大多數現代化瀏覽器的最新版本中，要實現這個功能，需要在 video 元素中加入 autoplay 屬性，且還需要設定一個 muted 屬性用於預設靜音播放。

可以看到在第一次頁面載入時是正常自動播放的，且此時 DOM 結構跟在 Vue 模板裡寫的程式碼是一樣的。

這時候切換一下路由到產品頁面，再切回首頁時就出現了問題，原來 video 元素中的 muted 莫名其妙地消失了，導致影片自動播放也隨之失效。

問題分析

起初我以為是 Nuxt 路由切換的問題，測試了使用 Nuxt 提供的 navigateTo() 方法和 Vue 路由提供的 $router.push() 方法，均存在該問題。

<div class="flex items-center justify-center">
  <img
    class="logo h-9 w-72 cursor-pointer"
    src="/logo.png"
    @click="$router.push('/')"
  />
</div>

第二次測試了給頁面設定 keepalive: true 來實現路由快取，但仍未解決該問題，且因此引出了其他的 Bug，沒往其深究所以暫且按下不表。

definePageMeta({
  layout: 'full-screen',
  keepalive: true,
})

第三次測試了給 video 元素透過 v-bind 去動態綁定 muted 屬性，不管是透過 ref 定義的值還是直接綁定 :muted="true"，均未能解決問題。

<video
  src="car.mp4"
  class="w-full h-full object-cover"
  autoplay
  loop
></video>

我開始懷疑是不是 Nuxt 的問題，於是我第四次使用另一個純 Vue 的專案做了測試。得出的結果是首次載入就失去了 muted 屬性，但詭異的是影片仍可以實現自動播放，這個奇怪的問題逐漸變得撲朔迷離。

最終在 Vue 的 Github 儲存庫中找到了一個尚未解決的 issues，遇到了跟我一樣的問題。

這是一個在 2022 年 10 月 12 日建立的 issues，至今為止仍未關閉。值得一提的是，底下有一則回覆指出「Vue 不應該真的破壞原生瀏覽器功能」，但可能這確實是 Vue.js 的 Bug。

問題解決

最終我不再去糾結問題所在，開始著手準備解決方案。既然透過動態綁定屬性不能解決問題，那就只能使用最原始的方案了，透過操作 DOM 去觸發元素的播放事件。

onMounted(() => {
  const videos = document.getElementsByTagName('video')
  Array.from(videos).forEach((video) => {
    video.play()
  })
})

在 Vue 掛載完成之後，透過 document.getElementsByTagName('video') 去取得首頁的所有影片元素，再依次觸發播放事件，如此就能夠在切換路由再切回首頁時，影片仍能保持自動播放。

儘管如此可以簡單地解決問題，但感覺這並不是最終的解決方案，其問題核心應該還是出現在框架上，希望能夠有大佬能深入研究一下，也能給我指點一二。