--- title: "Vue.js で HTML Video の muted 属性が消える - 憂いを忘れる一枚" description: "会社に新しいプロジェクトがあり、私が独自に技術選定して開発を担当しました。プロジェクトの要件は英語の製品紹介サイトを作ることで、比較的シンプルで開発期間も長くなかったため、最終的に Nuxt フレームワークを使用して開発することにしました。" canonical_url: "https://www.ikxin.com/ja/article/vue-muted-attribute" last_updated: "2026-09-16T09:59:27.259Z" locale: ja meta: "og:description": "会社に新しいプロジェクトがあり、私が独自に技術選定して開発を担当しました。プロジェクトの要件は英語の製品紹介サイトを作ることで、比較的シンプルで開発期間も長くなかったため、最終的に Nuxt フレームワークを使用して開発することにしました。" "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOOBpyBIVE1MIFZpZGVvIOOBriBtdXRlZCDlsZ7mgKfjgYzmtojjgYjjgosgLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~VnVlLmpzIOOBpyBIVE1MIFZpZGVvIOOBriBtdXRlZCDlsZ7mgKfjgYzmtojjgYjjgos%2Cdescription_~5Lya56S-44Gr5paw44GX44GE44OX44Ot44K444Kn44Kv44OI44GM44GC44KK44CB56eB44GM54us6Ieq44Gr5oqA6KGT6YG45a6a44GX44Gm6ZaL55m644KS5ouF5b2T44GX44G-44GX44Gf44CC44OX44Ot44K444Kn44Kv44OI44Gu6KaB5Lu244Gv6Iux6Kqe44Gu6KO95ZOB57S55LuL44K144Kk44OI44KS5L2c44KL44GT44Go44Gn44CB5q-U6LyD55qE44K344Oz44OX44Or44Gn6ZaL55m65pyf6ZaT44KC6ZW344GP44Gq44GL44Gj44Gf44Gf44KB44CB5pyA57WC55qE44GrIE51eHQg44OV44Os44O844Og44Ov44O844Kv44KS5L2~55So44GX44Gm6ZaL55m644GZ44KL44GT44Go44Gr44GX44G-44GX44Gf44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3Z1ZS1tdXRlZC1hdHRyaWJ1dGUi%2Cs_44zid7EkK_IjB9_s.png" "og:image:alt": "Vue.js で HTML Video の muted 属性が消える - 憂いを忘れる一枚" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Vue.js で HTML Video の muted 属性が消える" "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOOBpyBIVE1MIFZpZGVvIOOBriBtdXRlZCDlsZ7mgKfjgYzmtojjgYjjgosgLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~VnVlLmpzIOOBpyBIVE1MIFZpZGVvIOOBriBtdXRlZCDlsZ7mgKfjgYzmtojjgYjjgos%2Cdescription_~5Lya56S-44Gr5paw44GX44GE44OX44Ot44K444Kn44Kv44OI44GM44GC44KK44CB56eB44GM54us6Ieq44Gr5oqA6KGT6YG45a6a44GX44Gm6ZaL55m644KS5ouF5b2T44GX44G-44GX44Gf44CC44OX44Ot44K444Kn44Kv44OI44Gu6KaB5Lu244Gv6Iux6Kqe44Gu6KO95ZOB57S55LuL44K144Kk44OI44KS5L2c44KL44GT44Go44Gn44CB5q-U6LyD55qE44K344Oz44OX44Or44Gn6ZaL55m65pyf6ZaT44KC6ZW344GP44Gq44GL44Gj44Gf44Gf44KB44CB5pyA57WC55qE44GrIE51eHQg44OV44Os44O844Og44Ov44O844Kv44KS5L2~55So44GX44Gm6ZaL55m644GZ44KL44GT44Go44Gr44GX44G-44GX44Gf44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3Z1ZS1tdXRlZC1hdHRyaWJ1dGUi%2Cs_44zid7EkK_IjB9_s.png" "twitter:image:alt": "Vue.js で HTML Video の muted 属性が消える - 憂いを忘れる一枚" --- > Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt) # **Vue.js で HTML Video の muted 属性が消える** 2024.03.23 4,869 0 会社に新しいプロジェクトがあり、私が独自に技術選定して開発を担当しました。プロジェクトの要件は英語の製品紹介サイトを作ることで、比較的シンプルで開発期間も長くなかったため、最終的に Nuxt フレームワークを使用して開発することにしました。 開発は概ね順調でしたが、途中で遭遇した 1 つの Bug にかなりの時間を費やしました。インターネットで長い間調べても、関連する内容はごくわずかしか見つからず、Vue の Github リポジトリの issues にあるものばかりでした。結局、問題の原因を見つけることはできませんでした。もちろん、これは Bug ではなく、フレームワーク自体がこのように設計されている可能性もあります。 以下は私の解決に至るまでの考え方です。もし皆さんに別の見解があれば、ぜひご指摘・交流いただければと思います。 ## 問題の現象 製品紹介サイトのトップページには、全画面表示の `video` 要素があります。動画はデフォルトで自動再生されますが、ほとんどの最新のモダンブラウザのバージョンでこの機能を実現するには、`video` 要素に `autoplay` 属性を追加し、さらにデフォルトでミュート再生するための `muted` 属性を設定する必要があります。 初回のページ読み込み時には正常に自動再生されており、この時点では DOM 構造も Vue テンプレートに記述したコードと同じであることがわかります。 ここで一度ルートを製品ページに切り替え、再びトップページに戻ると問題が発生しました。元の `video` 要素にあった `muted` がなぜか消えてしまい、その結果、動画の自動再生も機能しなくなりました。 ## 問題の分析 最初は Nuxt のルート切り替えの問題だと思い、Nuxt が提供する `navigateTo()` メソッドと、Vue Router が提供する `$router.push()` メソッドを使ってテストしましたが、どちらでも同じ問題が発生しました。 HTML ```
``` 2 回目はページに `keepalive: true` を設定してルートをキャッシュしてみましたが、それでも問題は解決しませんでした。さらに別の Bug まで引き起こされたため、深く追究することなく、ひとまずこの話は置いておくことにしました。 JavaScript ``` definePageMeta({ layout: 'full-screen', keepalive: true, }) ``` 3 回目は、`video` 要素に v-bind を使って `muted` 属性を動的にバインドしてみました。ref で定義した値でも、直接 `:muted="true"` とバインドしても、問題は解決できませんでした。 HTML ``` ``` Nuxt の問題ではないかと疑い始めたため、4 回目は別の純粋な 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/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/vue-muted-attribute#webpage","@type":"WebPage","description":"会社に新しいプロジェクトがあり、私が独自に技術選定して開発を担当しました。プロジェクトの要件は英語の製品紹介サイトを作ることで、比較的シンプルで開発期間も長くなかったため、最終的に Nuxt フレームワークを使用して開発することにしました。","name":"Vue.js で HTML Video の muted 属性が消える","url":"https://www.ikxin.com/ja/article/vue-muted-attribute","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/vue-muted-attribute"]}]}]} ``` ## Sitemap See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.