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>
相关推荐
然我10 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子15 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB241 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安12 小时前
React hooks——useReducer
前端·javascript·react.js