Html5 – Sử dụng Full Screen API

Html5 Fullscreen API DemoHtml5 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à webkitmoz 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 mso để 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>

YinYangIt's Blog

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s