1. 程式人生 > 實用技巧 >HTML5 video進入全屏和退出全屏的實現方法

HTML5 video進入全屏和退出全屏的實現方法

當我們使用video標籤的時候,有時候因為更多的需要,我們要自己自定義控制欄,而進入和退出全屏也是其中的一部分

不同的瀏覽器有不同的實現方法

// Webkit
delement.webkitRequestFullScreen();//進入全屏
document.webkitCancelFullScreen();//退出全屏
 
// Firefox
delement.mozRequestFullScreen();
document.mozCancelFullScreen();
  
// W3C 
delement.requestFullscreen();
document.exitFullscreen();
//進入全屏
function FullScreen() {
    var ele = document.documentElement;
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
    }
}
//退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }