使用el-dialog遇到的问题如何关闭弹窗前调用方法

在使用el-dialog的时候 我的需求遇到一个问题 就是关闭弹窗视频停止播放

点击 按钮调用方法没问题

但是使用弹窗右上角X号关闭弹窗和ESC快捷键关闭视频依然还在播放 

在按钮上可以通过@click调用

那如何使用弹窗右上角X号关闭和ESC快捷键关闭调用同一方法呢？

实现如下

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  @close="cancel"  //就是这个
  center>
     <el-form-item  prop="noteImg">
        <template >
       <video ref="video" :src="my.mp4" controls autoplay style="height: 400px;width: 90%; background-color: #000000;" >
          		<!-- <source :src="my.mp4" > -->
          		您的浏览器暂不支持video标签，请更换浏览器后重试。
          	</video>
         </template>
      </el-form-item>
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
methods: {

      // 取消按钮
    cancel() {
      //视频结束  通过$refs获取video标签ref属性pause关闭视频
      this.$refs.video.pause();
        },
    },
    }
  };
</script>

@close就是控制弹窗关闭的属性

同时使用ESC快捷键关闭也是使用的这个属性