主页
JS 参考手册
JavaScript Fullscreen API
tryjsref_element_requestfullscreen
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>使用 JavaScript 全屏</h2> <p>单击按钮以全屏模式打开视频。</p> <button onclick="openFullscreen();">以全屏模式打开视频</button> <p><strong>Tip:</strong>按“Esc”键退出全屏。</p> <video width="100%" controls id="myvideo"> <source src="/demo/video/rain.mp4" type="video/mp4"> <source src="/demo/video/rain.ogg" type="video/ogg"> 您的浏览器不支持 video 视频标签。 </video> <script> /* 获取你想要全屏显示的元素 */ var elem = document.getElementById("myvideo"); /* 开启全屏模式的函数 */ function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } </script> <p>注意：Internet Explorer 10 及更早版本不支持全屏模式。</p> </body> </html>