---
title: "HTML Video 在 Vue.js 中消失的 muted 屬性 - 一紙忘憂"
description: "公司有個新專案由我這邊獨立選型開發，專案需求是做一個英文的產品展示官網，考慮到專案比較簡單且週期不長，最終決定使用 Nuxt 框架來進行開發。"
canonical_url: "https://www.ikxin.com/zh-tw/article/vue-muted-attribute"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-tw
meta:
  "og:description": "公司有個新專案由我這邊獨立選型開發，專案需求是做一個英文的產品展示官網，考慮到專案比較簡單且週期不長，最終決定使用 Nuxt 框架來進行開發。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~SFRNTCBWaWRlbyDlnKggVnVlLmpzIOS4rea2iOWkseeahCBtdXRlZCDlsazmgKcgLSDkuIDntJnlv5jmhoI%2Cc_Article%2Ctitle_~SFRNTCBWaWRlbyDlnKggVnVlLmpzIOS4rea2iOWkseeahCBtdXRlZCDlsazmgKc%2Cdescription_~5YWs5Y-45pyJ5YCL5paw5bCI5qGI55Sx5oiR6YCZ6YKK542o56uL6YG45Z6L6ZaL55m877yM5bCI5qGI6ZyA5rGC5piv5YGa5LiA5YCL6Iux5paH55qE55Si5ZOB5bGV56S65a6Y57ay77yM6ICD5oWu5Yiw5bCI5qGI5q-U6LyD57Ch5Zau5LiU6YCx5pyf5LiN6ZW377yM5pyA57WC5rG65a6a5L2~55SoIE51eHQg5qGG5p625L6G6YCy6KGM6ZaL55m844CC%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL3Z1ZS1tdXRlZC1hdHRyaWJ1dGUi%2Cs_W3M-1Xu6v2COcO1F.png"
  "og:image:alt": "HTML Video 在 Vue.js 中消失的 muted 屬性 - 一紙忘憂"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "HTML Video 在 Vue.js 中消失的 muted 屬性"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~SFRNTCBWaWRlbyDlnKggVnVlLmpzIOS4rea2iOWkseeahCBtdXRlZCDlsazmgKcgLSDkuIDntJnlv5jmhoI%2Cc_Article%2Ctitle_~SFRNTCBWaWRlbyDlnKggVnVlLmpzIOS4rea2iOWkseeahCBtdXRlZCDlsazmgKc%2Cdescription_~5YWs5Y-45pyJ5YCL5paw5bCI5qGI55Sx5oiR6YCZ6YKK542o56uL6YG45Z6L6ZaL55m877yM5bCI5qGI6ZyA5rGC5piv5YGa5LiA5YCL6Iux5paH55qE55Si5ZOB5bGV56S65a6Y57ay77yM6ICD5oWu5Yiw5bCI5qGI5q-U6LyD57Ch5Zau5LiU6YCx5pyf5LiN6ZW377yM5pyA57WC5rG65a6a5L2~55SoIE51eHQg5qGG5p625L6G6YCy6KGM6ZaL55m844CC%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL3Z1ZS1tdXRlZC1hdHRyaWJ1dGUi%2Cs_W3M-1Xu6v2COcO1F.png"
  "twitter:image:alt": "HTML Video 在 Vue.js 中消失的 muted 屬性 - 一紙忘憂"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **HTML Video 在 Vue.js 中消失的 muted 屬性**

2024.03.23 4,869  0

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

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

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

## 問題現象

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

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

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

## 問題分析

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

 HTML

```
<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，沒往其深究所以暫且按下不表。

 JavaScript

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

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

 HTML

```
<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 去觸發元素的播放事件。

 JavaScript

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

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

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

## **評論**

(0)

暫無評論，來說兩句吧

## **發佈評論**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/zh-tw#website","@type":"WebSite","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","inLanguage":"zh-TW","name":"一紙忘憂","url":"https://www.ikxin.com/zh-tw","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/zh-tw/article/vue-muted-attribute#webpage","@type":"WebPage","description":"公司有個新專案由我這邊獨立選型開發，專案需求是做一個英文的產品展示官網，考慮到專案比較簡單且週期不長，最終決定使用 Nuxt 框架來進行開發。","name":"HTML Video 在 Vue.js 中消失的 muted 屬性","url":"https://www.ikxin.com/zh-tw/article/vue-muted-attribute","isPartOf":{"@id":"https://www.ikxin.com/zh-tw#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/zh-tw/article/vue-muted-attribute"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.