【Vue】：解决动态更新 ＜video＞ 标签 src 属性后视频未刷新的问题

问题描述

在 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 属性，都可以帮助您解决这个问题。根据具体的应用场景和个人偏好选择最适合的方案，确保视频组件能够及时响应用户操作并展示最新的内容。

但对于原因分析不是很确定，如果有不同意见，欢迎指教讨论。