问题描述

在 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>