問題描述

在 Vue.js 項目，當嘗試動態更新 <video> 標簽的 <source> 元素 src 屬性來切換視頻時，遇到了一個問題：即使 src 屬性已更改，瀏覽器仍顯示舊視頻。具體表現為用戶選擇新視頻后，視頻區域繼續顯示之前的視頻，未能加載新視頻源。

<template><video controls><source :src="videoUrl" type="video/mp4">Your browser does not support the video tag.</video>
</template>

原因分析

1.Vue 的虛擬 DOM 更新機制

盡管 videoUrl 數據發生了變化，但由于 <video> 和 <source> 標簽的特殊性，Vue 的默認更新策略可能不會觸發這些元素的重載。這意味著即使 src 屬性改變了，實際的媒體資源并沒有被重新加載。

解決方案：

為了解決上述問題，可以采取以下幾種解決方案：

1. 使用 key 屬性

給 <video> 標簽添加一個 :key="videoUrl" 綁定屬性，使得每次 videoUrl 變化時，整個 <video> 元素都會被重新創建，從而強制刷新視頻內容。

<template><video :key="videoUrl" controls><source :src="videoUrl" type="video/mp4">Your browser does not support the video tag.</video>
</template>

2. 直接綁定 src 屬性到 <video> 標簽

通過這種方式，您可以直接在 <video> 標簽上設置 src 屬性，這可能會減少由于 <source> 元素的存在而帶來的復雜性。當 src 屬性發生變化時，瀏覽器通常會自動重新加載視頻，因為它是直接綁定到 <video> 元素上的。

<template><video :src="videoUrl" controls>Your browser does not support the video tag.</video>
</template>

總結

本文介紹了在 Vue.js 中遇到的動態更新 <video> 標簽 src 屬性后視頻未刷新的問題及其原因，并提供了多種有效的解決方案。無論是簡化代碼結構還是使用 key 屬性，都可以幫助您解決這個問題。根據具體的應用場景和個人偏好選擇最適合的方案，確保視頻組件能夠及時響應用戶操作并展示最新的內容。?

但對于原因分析不是很確定，如果有不同意見，歡迎指教討論。