今天的一个小时只做了全屏和退出全屏。网上有很多文章，我就是复制粘贴，可是即便如此我也遇到了前所未有的问题，当然错误产生的原因还是自己的无知，只不过经过这次，再次告诉我，当出现原本不该出现错误的时候，这个时候一定要记得仔细看官网或者别人写的博客，而不是“瞟一眼”。当然最好是在看别人博客的时候就认真看，这样的话就不会遇到那些愚蠢的问题。
今天首先我要解决昨天留下的问题，那就是在全屏的情况下不是自己自定义的样式，我在网上看了一圈并没有发现有相关的解决方法，好像所有人都没有遇到过一样。证明自己愚蠢的唯一方式就是动手做。
我在看教程的过程中突然想到是不是 div 也有全屏的方法，而 div 全屏以后肯定没有那些播放的样式，于是我就尝试了一下，发现果真如此。首先获取 div 实例：
const divRef = useRef<DIVTypeHTML>(null);
这里的 DIVTypeHTML 是我自定义的类型，因为我发现如果我写兼容的代码的话就会出现报红，我对 TS 不是很熟悉，如果看到的有更好的方式，麻烦提供一下，让我能够写出优雅的代码，下面是我定义的类型：
interface DIVTypeHTML extends HTMLDivElement {
mozRequestFullScreen: () => void;
webkitRequestFullscreen: () => void;
msRequestFullscreen: () => void;
isFullscreen: boolean;
}
下面是进入全屏和退出全屏的函数代码：
// 开启全屏
const requestFullscreen = useCallback((document: DIVTypeHTML) => {
if (document.requestFullscreen) {
document.requestFullscreen();
} else if (document.mozRequestFullScreen) {
document.mozRequestFullScreen();
} else if (document.webkitRequestFullscreen) {
document.webkitRequestFullscreen();
} else if (document.msRequestFullscreen) {
document.msRequestFullscreen();
}
}, []);
// 退出全屏
const exitFullscreen = useCallback(() => {
// 这里的类型跟上面一样
const document: DocumentType = window.document;
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}, []);
现在说说今天我犯的最大的错误，那就是退出全屏的函数中的 document ，我刚开始以为是 div 的实例，结果才发现是 window.document ，在这上面花费了大量时间，导致今天进度缓慢，只不过以后我尽量每天都学习学习前端的知识，让我能够逐渐熟悉。
刚开始进入全屏的时候由于包裹 video 的 div 并没有百分之百的宽高度，所以放大以后发现视频的区域仍然还是那么小。只不过经过我调整以后我发现 safari 浏览器仍然存在这样的问题，明天再解决。
我定义的这个组件的 props ：
interface LiveProps {
// 可以自定义最外层盒子的样式
liveClassName?: string;
// 需要播放的地址
url: string;
}
