問題描述

在 Vue項目中，嘗試動態更新 標簽的 元素 src 屬性來切換視頻時，遇到了一個問題：即使 src 已更改，瀏覽器仍不顯示視頻。

<template><video width="100%" height="100%" controls@pause="showPlay ? onPause() : () => false"@playing="showPlay ? onPlaying() : () => false"><source :src="sourceSrc" type="video/mp4"></video>
</template>

原因分析

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

解決方案：

方案1. 使用 key 屬性
給 標簽添加一個 :key=“sourceSrc” 綁定屬性，使得每次 sourceSrc變化時，整個 元素都會被重新創建，從而強制刷新視頻內容。

<template><video width="100%" height="100%" controls:key="sourceSrc"@pause="showPlay ? onPause() : () => false"@playing="showPlay ? onPlaying() : () => false"><source :src="sourceSrc" type="video/mp4"></video>
</template>

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

<template><video width="100%" height="100%" controls:src="sourceSrc"@pause="showPlay ? onPause() : () => false"@playing="showPlay ? onPlaying() : () => false"></video>
</template>