html video全屏原理,html5 video全屏实现方式

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多

在html5中，全屏方法可以适用于很多html 元素，不仅仅是video

 html>

全屏问题

*{

padding: 0px;

margin: 0px;

}

body div.videobox{

width: 400px;

height: 320px;

margin: 100px auto;

}

全屏

//alert(document.createDocumentFragment);

function launchFullscreen(element)

{

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.msRequestFullscreen){

element.msRequestFullscreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullScreen();

}

}

function exitFullscreen()

{

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}

document.querySelector('#fullScreenBtn').onclick = function()

{

window.setTimeout(function enter(){

launchFullscreen(document.querySelector('#video'));

});

window.setTimeout(function exit(){

exitFullscreen();

},5*1000);

};