javascript - 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>

标签： javascripthtmlcss