HTML 5 videoフルスクリーンへのアクセスとフルスクリーンからの終了

1171 ワード

javascript フルスクリーンフルスクリーンを終了ビデオコントローラフルスクリーン対応

ブログに移行しました
ビデオタグを使用する場合、より多くの必要性のためにコントロールバーをカスタマイズし、フルスクリーンに入るか終了するかも一部です.

異なるブラウザには異なる実装方法がある

// Webkit
element.webkitRequestFullScreen();//    
document.webkitCancelFullScreen();//    

// Firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 
element.requestFullscreen();
document.exitFullscreen();

一般的な互換性の書き方は、異なるブラウザで互換性がない場合は、w 3 c標準の方法を使用します.

//    
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();
    }
}

次に使用例

$(ele).on('click',function(){
    FullScreen();
   // exitFullscreen();
});

HTML 5の新しい属性

【JPA】JPQLクエリー--まとめ