效果展示

视频切换前

视频切换后

完整代码

<template><!-- 设置v-if只在路径有值时，标签才存在 --><video v-if="state.videoSrc != null" controls><source :src="state.videoSrc" type="video/mp4"></source></video><div><el-button @click="handleClick">切换视频</el-button></div>
</template><script setup name="videoUpdate">javascript">
import { onMounted, reactive, nextTick } from 'vue';
// 这是是调用本地视频，但不影响测试切换功能
import staticFile1 from '@/assets/video/2023-07-09-20-59-01.mp4'
import staticFile2 from '@/assets/video/2023-07-13-13-59-36.mp4'const state = reactive({videoSrc: null,//初始videoSrc
})// 切换视频按钮
const handleClick = async () => {// 1.先清空videoSrcstate.videoSrc = null// 2.async配合nextTick等待页面更新await nextTick()// 3.将videoSrc换成第二个视频路径state.videoSrc = staticFile2
}onMounted(async ()=>{// 页面初始化时显示第一个视频state.videoSrc = staticFile1
})</script><style scoped>video{width: 400px;}
</style>