vue video src改变页面不刷新的两种解决方法

少油少盐不要辣

已于 2022-02-16 21:49:46 修改

阅读量1.3w

点赞数 9

分类专栏： vue 文章标签： vue.js javascript 前端

于 2019-07-05 23:59:37 首次发布

本文链接：https://blog.csdn.net/qq_40713392/article/details/94782292

版权

vue 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

src值改变了，但是视图未更新。

<video ref="video" controls controlslist="nodownload" preload="none" width="100%" height="100%" :poster="item.img">
        <source :src="item.mp4_url" type="video/mp4">
</video>

正确的做法是。

方法一：

不绑定source标签里的src属性，而绑定video标签中的src属性。

<video ref="video" controls controlslist="nodownload"
 preload="none" width="100%" height="100%" :poster="item.img" :src="item.mp4_url">
 </video>

方法二：this.$nextTick()

一开始，用v-if将video元素隐藏，当src值改变的时候，为获取更新后的DOM，将showVideo变为true的方法放在this.$nextTick()中，触发浏览器的重排，可以使浏览器重新读取source元素的src值，重新获取视频资源。这种方法，适用于有在视频区域上覆盖图片的产品需求。

<template>
    <div id="login">
      <div>登录页面</div>
      <div class="video">
        <div class="videoChild" @click="disappearMask" v-show="showMask"></div>
        <video v-if="showVideo" preload="auto" controls>
          <source  :src="`../../static/${currentSrc}.mp4`" type="video/mp4">
        </video>
      </div>
      <p class="btns">
        <button @click="beforeOne" :class="{active: selfNum === 0}">上一个</button>
        <button @click="afterOne" :class="{active: selfNum === 1}">下一个</button>
      </p>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      srcArr: ['company', 'self'],
      currentSrc: 'company',
      showVideo: false,
      showMask: true,
      selfNum: 0
    }
  },
  methods: {
    beforeOne () {
      this.currentSrc = this.srcArr[0]
      this.selfNum = 0
      this.showMask = true
      this.showVideo = false
    },
    afterOne () {
      this.currentSrc = this.srcArr[1]
      this.selfNum = 1
      this.showMask = true
      this.showVideo = false
    },
    disappearMask () {
      this.showMask = false
    }
  },
  mounted: function () {
    this.currentSrc = this.srcArr[0]
  },
  watch: {
    currentSrc () {
      this.$nextTick(() => {
        this.showVideo = true
      })
    }
  }
}
</script>

<style scoped lang="less">
#login{
  .video{
    width: 400px;
    height: 300px;
    position: relative;
    video{
      width: 400px;
      height: 300px;
    }
    .videoChild{
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 300px;
      background: aqua;
      z-index: 1000;
    }
  }
  .btns{
    .active{
      color: red;
    }
  }
}
</style>