Html5 – Sử dụng Full Screen API

Html5 cho phép bạn có thể đưa một thành phần/thẻ của trang vào trạng thái hiển thị fullscreen (khác với chế độ fullscreen của trình duyệt (F11)). Ngoài ra, bạn có thể sử dụng CSS để thay đổi cách hiển thị của thành phần khi nó ở trong trạng thái fullscreen.

API này gói gọn trong 5 mục sau:

  • element.requestFullScreen(): Phương thức kích hoạt trạng thái fullscreen của một thành phần trong trang web.
  • document.cancelFullScreen(): Phương thức hủy bỏ trạng thái fullscreen.
  • document.fullscreenchange: Sự kiện được kích hoạt khi trạng thái fullscreen thay đổi.
  • document.fullScreen: Thuộc tính boolean dùng để kiểm tra trạng thái fullscreen.
  • :full-screen: Một pseudo-class của CSS dùng để định nghĩa cách hiển thị của thành phần.

Hiện tại API này chỉ mới được hỗ trợ trên Mozilla (Firefox) và WebKit (Chrome/Safari). Bạn cần sử dụng các tiền tố (vendor) là webkit và moz cho mỗi phương thức hay thuộc tính, style bên trên để áp dụng cho từng loại trình duyệt.

Nếu cần thiết, bạn có thể thêm trước hai vendor ms và o để chúng có thể hoạt động được sau khi IE, Opera tích hợp API này:

Phương thức enterFullScreen():

function enterFullScreen(id){

	var element = document.getElementById(id);

	element.requestFullscreen ? element.requestFullscreen() :
		element.mozRequestFullScreen ? element.mozRequestFullScreen() :
		element.webkitRequestFullScreen ? element.webkitRequestFullScreen() :
		alert("Fullscreen API is not supported in this browser");

}

Phương thức exitFullScreen():

function exitFullScreen(){

	document.exitFullscreen ? document.exitFullscreen() :
		document.mozCancelFullScreen ? document.mozCancelFullScreen() :
		document.webkitCancelFullScreen ? document.webkitCancelFullScreen() :
		alert("Fullscreen API is not supported in this browser");

}

Sự kiện fullscreenchange và thuộc tính fullScreen:

document.addEventListener("fullscreenchange", function (e) {
	console.log(document.fullscreen);
});
document.addEventListener("mozfullscreenchange", function (e) {
	console.log(document.mozFullScreen);
});
document.addEventListener("webkitfullscreenchange", function (e) {
	console.log(document.webkitIsFullScreen);
});

CSS:

div:full-screen {
    background-color: gray;
}
div:-moz-full-screen {
    background-color: gray;
}
div:-webkit-full-screen {
    background-color: gray;
}

Ví dụ

Html5 Fullscreen API Demo

<html>

<head>

<style>

#mydiv {

padding-top: 200px;

display: none;

height: 400px;

background: black;

}

#mydiv:full-screen { display: block; }

:full-screen h1 {  color: wheat; }

#mydiv:-moz-full-screen {  display: block; }

:-moz-full-screen h1{ color: wheat; }

#mydiv:-webkit-full-screen {  display: block; }

:-webkit-full-screen h1{ color: wheat; }

</style>

<script type="text/javascript">

function enterFullScreen(id){

var element = document.getElementById(id);

element.requestFullscreen ? element.requestFullscreen() :

element.mozRequestFullScreen ? element.mozRequestFullScreen() :

element.webkitRequestFullScreen ? element.webkitRequestFullScreen() :

alert("Fullscreen API is not supported in this browser");

}

function exitFullScreen(){

document.exitFullscreen ? document.exitFullscreen() :

document.mozCancelFullScreen ? document.mozCancelFullScreen() :

document.webkitCancelFullScreen ? document.webkitCancelFullScreen() :

alert("Fullscreen API is not supported in this browser");

}

document.addEventListener("fullscreenchange", function (e) {

console.log(document.fullscreen);

});

document.addEventListener("mozfullscreenchange", function (e) {

console.log(document.mozFullScreen);

});

document.addEventListener("webkitfullscreenchange", function (e) {

console.log(document.webkitIsFullScreen);

});

</script>

</head>

<body>

<center>

<div id="mydiv">

<h1>You are in fullscreen mode.</h1>

<input type="button" value="Exit full screen" onclick="exitFullScreen('mydiv')"     />

</div>

<input type="button" value="Enter full screen" onclick="enterFullScreen('mydiv')"/>

</center>

</body>

</html>