Fullscreen API All In One

https://caniuse.com/?search=requestFullscreen

requestFullscreen & exitFullscreen

document.addEventListener("keydown", function(e) {
  if (e.key === "Enter") {
    toggleFullScreen();
  }
}, false);


function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide#presentation_differences

demo

Picture In Picture

https://mdn.github.io/dom-examples/fullscreen-api/index.html

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！