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>
相关推荐
我想说一句2 分钟前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js
康康的幸福生活3 分钟前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
绅士玖5 分钟前
前端数据存储总结:Cookie、localStorage、sessionStorage与IndexedDB的使用与区别
前端·javascript·数据库
Mintopia16 分钟前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
布兰妮甜27 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia28 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene37 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子1 小时前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
just小千2 小时前
重学React(二):添加交互
javascript·react.js·交互