HTML5 pemain video skrin penuh (Skrin penuh) kaedah contoh_html5 kemahiran tutorial

Pertama sekali, tajuk ini mengelirukan, tetapi sebab untuk menukar tajuk dengan cara ini adalah terutamanya kerana video digunakan lebih banyak

Dalam html5, kaedah skrin penuh boleh digunakan pada banyak elemen html, bukan hanya video

Salin kod Kod Seperti berikut: 全屏问题 *{ padding: 0px; margin: 0px; }

body div.videobox{ width: 400px; height: 320px; margin: 100px auto; background-color:#000; }

body div.videobox video.video { width: 100%; height: 100%; }

:-webkit-full-screen {

}

:-moz-full-screen {

}

:-ms-fullscreen {

}

:-o-fullscreen {

}

:full-screen {

}

:fullscreen {

}

:-webkit-full-screen video { width: 100%; height: 100%; } :-moz-full-screen video{ width: 100%; height: 100%; }

全屏

//Panggilan refleksi var invokeFieldOrMethod = function(elemen, kaedah) { var uslePrefixMethod; ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) { if (usablePrefixMethod) return; if (prefix) === "") { // Tiada awalan, huruf pertama kaedah ialah huruf kecil method = method.slice(0,1).toLowerCase() method.slice(1); } var typePrefixMethod = typeof element[prefix method]; if (typePrefixMethod "" !== "undefined") { if (typePrefixMethod === "function") { usalePrefixMethod = elemen [kaedah awalan] (); } lain { Kaedah Awalan yang boleh digunakan = elemen[kaedah awalan]; } } });

kembalikan Kaedah Awalan yang boleh digunakan; };

//Masukkan skrin penuh pelancaran fungsi Skrin penuh(elemen) { //Kaedah ini tidak boleh dilaksanakan dalam tugas tak segerak, jika tidak Firefox tidak boleh masuk ke skrin penuh if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.msRequestFullscreen){ 🎜> element.msRequestFullscreen(); } else if(element.oRequestFullscreen){ element.oRequestFullscreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); }else{

var docHtml = document.documentElement; var docBody = document.body; var videobox = document.getElementById('videobox'); var cssText = 'width :100%;height:100%;overflow:hidden;'; docHtml.style.cssText = cssText; docBody.style.cssText = cssText>; document.IsFullScreen = benar;

} } //Keluar daripada skrin penuh function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.oRequestFullscreen){ document.oCancelFullScreen if(); }document.oRequestFullscreen ){ document.webkitExitFullscreen( ); }else{ var docHtml = document.documentElement; var docBody = document.body; var videobox = document.getElementById('videobox' ); docHtml.style. cssText = ""; docBody.style.cssText = ""; videobox.style.cssText = ""; document.IsFullScreen = false; } } document .getElementById('fullScreenBtn').addEventListener('click',function(){ launchFullscreen(document.getElementById('video')); window.setTimeout(function exit(){ // Semak sama ada penyemak imbas berada dalam skrin penuh if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen>)keluar Skrin Penuh(); } },5*1000); },salah);