HTML-退出全屏视频且已暂停在Google Chrome浏览器上无法运行

Question

我有一个视频，并在全屏模式下单击它效果很好，但是当我按退出键或取消全屏模式时，视频仍在播放并且没有暂停音频。我在Mozilla Firefox中尝试了我的代码，但该代码无法正常工作，但在Google Chrome上尝试时，则无法正常工作。帮助，请谢谢。

这是我的代码

// this should have worked...
const query = matchMedia('@media (device-width: 100vw) and (device-height: 100vh)');
query.onchange = e => {
  if (query.matches) console.log('entered FS');
  else console.log('exit FS');
}
//... but it doesn't

// so here is the hack...
let fs_elem = null;
myFSHack.addEventListener('transitionend', e => {
  const prev = fs_elem;
  fs_elem = document.querySelector(':fullscreen');
  if (!fs_elem && prev === myvid) {
    myvid.pause();
    console.log('exit fullscreen')
  }
});

#myFSHack {
  max-height: 0;
  transition: max-height .1s;
  display: inline-block;
  position: absolute;
  z-index: -1;
  pointer-events: none
}

@media (device-width: 100vw) and (device-height: 100vh) {
  #myFSHack {/* trigger the transition */
    max-height: 1px;
  }
}
:root,body{margin:0;}
video {max-width: 100vw;}

<span id="myFSHack"></span><!-- This Line of Code this is the one which helps me to pause the full screen video when escaped or cancel --> 
<h5>Click the View Full Screen</h5>
<video id="myvid" controls loop src="video/flashtrailer.mp4"></video>