Problems encountered when using el-dialog: How to call the method before closing the pop-up window

When using el-dialog, I encountered a problem: closing the pop-up video to stop playing.

It's no problem to call the method when clicking the button

However, using the X in the upper right corner of the pop-up window to close the pop-up window and the ESC shortcut key to close the video is still playing. 

Can be called via @click on the button

So how do you use the X number in the upper right corner of the pop-up window to close and the ESC shortcut key to close and call the same method?

Implemented as follows

<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 is the attribute that controls the closing of the pop-up window.

At the same time, using the ESC shortcut key to close also uses this attribute.