vue2.0上video视频切换（一）mp4格式的

在 Vue 2.0 中，如果你想要切换 video 元素的源（src），你需要确保每次切换时都提供一个不同的 src 值，以避免浏览器从缓存中加载旧的视频。

我这里使用v-if和key结合，当你使用 key 属性时，Vue 会跟踪每个节点的身份，而不仅仅是它的内容。如果 key 发生变化，Vue 会认为这是一个新的节点，因此会销毁旧的节点并创建一个新的节点。

html中的代码如下：

 <div style="width: 50%;height: 50%">
      <el-button type="primary" @click="switchVideo(1)">切换视频1</el-button>
      <el-button type="primary" @click="switchVideo(2)">切换视频2</el-button>
      <video v-if="src" :key="src" ref="video" style="width: 100%;height: 100%" controls>
        <source :src="src" :type="type">
      </video>
 </div>

 data中的属性如下：

  data() {
    return {
      src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }
  },

切换方法如下：

methods: {
    switchVideo(value) {
      if (value === 1) {
        this.src = 'https://video.pearvideo.com/mp4/third/20200212/cont-1651180-11487675-112807-hd.mp4';
      } else if (value === 2) {
        this.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
      } else {
        this.src = '';
      }
      console.log('value', value, this.src);
    }
}

效果图如下，点击按钮，可以实现视频的切换。