vue中video视频路径改变,dom不更新问题

效果展示

视频切换前

视频切换后

完整代码

html 复制代码
<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">
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.先清空videoSrc
    state.videoSrc = null
    // 2.async配合nextTick等待页面更新
    await nextTick()
    // 3.将videoSrc换成第二个视频路径
    state.videoSrc = staticFile2
}

onMounted(async ()=>{
    // 页面初始化时显示第一个视频
    state.videoSrc = staticFile1
})


</script>

<style scoped>
    video{
        width: 400px;
    }
</style>
相关推荐
晚枫~12 分钟前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~13 分钟前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
九十一15 分钟前
vue3事件总线与emit
前端·vue.js
丨Sky丨夜吻20 分钟前
vscode扩展
ide·vue.js·vscode
云枫晖1 小时前
JS核心知识-Ajax
前端·javascript
青灬河1 小时前
实现企业级全栈应用服务框架-Elpis(一)
vue.js·node.js
重生之我是菜鸡程序员1 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
fox_2 小时前
JS: 实现扁平化函数 flat
javascript
剽悍一小兔2 小时前
小程序到底用Store还是LocalStorage ?
javascript
一只小风华~2 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript