HTML5의 간단하고 실용적인 5가지 API(2부, 전체 화면, 가시성, 사진 촬영, 사전 로드, 배터리 상태 포함)_html5 튜토리얼 기술

HTML5의 탄생으로 우리는 JavaScript와 HTML의 새롭고 멋진 기능을 많이 접하게 되었습니다. 새로운 기능 중 일부는 수년 동안 알려져 왔으며 광범위하게 사용되는 반면, 다른 기능은 주로 최첨단 모바일 기술이나 데스크톱 응용 프로그램의 보조 기능으로 사용됩니다. 이러한 새로운 HTML5 기능이 아무리 강력하고 사용하기 쉽다고 하더라도 모두 브라우저 프런트엔드 애플리케이션을 더 잘 개발하는 데 도움이 되도록 설계되었습니다. 이전에 여러분이 모르는 5가지 새로운 HTML5 기능에 대한 기사를 공유한 적이 있습니다. 여기에 언급된 기술 중 일부가 웹 애플리케이션을 개선하는 데 도움이 되기를 바랍니다. 여기서는 또한 소수의 사람들이 알고 있는 몇 가지 새로운 HTML5 기능을 여러분과 공유하고 싶습니다. 이 기능이 여러분에게 도움이 되기를 바랍니다.

1. 전체 화면 API 인터페이스

강력한 전체 화면 API 인터페이스를 사용하면 프로그래머는 프로그래밍을 통해 브라우저를 전체 화면 모드로 실행하고 사용자의 권한을 요청할 수 있습니다.

코드 복사

코드는 다음과 같습니다:

// 올바른 메소드를 찾고 올바른 요소를 호출합니다.
function launchFullScreen(element) {
if(element. requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
요소. webkitRequestFullScreen();
}
}

// 지원하는 브라우저의 경우 전체 화면을 실행하세요!
launchFullScreen(document.documentElement); // 전체 페이지
launchFullScreen(document.getElementById("videoElement")) // 모든 개별 요소

모든 페이지 요소는 전체 화면 출력의 대상이 될 수 있습니다. HTML5는 브라우저가 전체 화면일 때 프로그래머가 전체 화면 요소의 스타일을 제어할 수 있도록 CSS 의사 클래스도 제공합니다. 이 전체 화면 API는 특히 BananaBread와 같은 슈팅 게임을 개발할 때 유용합니다.

2. 페이지 가시성 API 인터페이스

페이지 가시성 API 인터페이스는 청취 이벤트를 제공합니다. 이 이벤트는 현재 페이지가 브라우저에서 활성화된 탭/창인지, 사용자가 보고 있는 페이지인지 여부를 프로그래머에게 알려줄 수도 있습니다. 페이지를 전환하고 이 페이지/창 보기를 중지하려면:

코드 복사

코드는 다음과 같습니다.

// Sam Dutton에서 약간 수정됨
// 숨겨진 속성 이름 및 가시성 변경 이벤트 설정
// 일부 브라우저는 공급업체 접두어 지원만 제공하므로
var Hidden, state, visibleChange ;
if (typeof document.hidden !== "정의되지 않음") {
hide = "hidden";
visibleChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefine") {
hide = "mozHidden";
visibleChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if(문서 유형 .msHidden !== "정의되지 않음") {
숨겨진 = "msHidden";
visibleChange = "msvisibilitychange";
state = "msVisibilityState";
} else if(typeof document.webkitHidden != = "정의되지 않음") {
숨겨진 = "webkitHidden";
visibleChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// 제목을 지속적으로 변경하는 리스너 추가
document.addEventListener(visibilityChange, function(e) {
// 상태에 따라 처리 시작 또는 중지

}, false);

이 API를 유연하게 사용하면 프로그래머는 사용자가 이 페이지를 보고 있지 않을 때 일부 무거운 작업(예: AJAX 또는 애니메이션)을 일시 중지할 수 있습니다.

3. getUserMedia 인터페이스 API

getUserMedia API는 매우 흥미로운 인터페이스입니다! 이 API를 사용하고

코드 복사

코드는 다음과 같습니다.

// 이벤트 리스너를 제자리에 배치
window.addEventListener("DOMContentLoaded", function() {
// 요소 가져오기, 설정 생성 등
var canvas = document.getElementById ("캔버스"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("비디오 캡처 오류: ", error.code)
};

// 비디오 리스너 배치
if(navigator.getUserMedia) { // 표준
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play( );
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit 접두어
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window. webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

你一以后的应용中试试这个HTML5 새로운 功能, 过浏览器进行各种各样的交互的技术已经越来越流行了!

4、电池接口API

电池接口API는 是显然是专门为휴대용 모바일 장치, 它提供了读取设备り电池电와 充电状态的功能:

复aze代码

代码如下:

// 배터리를 가져와!
var 배터리 = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// 몇 가지 유용한 배터리 속성
console.warn("배터리 충전: ", 배터리.충전); // true
console.warn("배터리 잔량: ", Battery.level); // 0.58
console.warn("배터리 방전 시간: ", Battery.dischargeTime);

// 몇 가지 이벤트 리스너 추가
battery.addEventListener("chargechange", function(e) {
console.warn("배터리 충전 변경: ", Battery.charge);
} , false);

这些HTML5提供的电池接口API能直接将电池电weight状态告诉web应用，而不需要借助电池传感器或第三方사용할 수 없습니다. 매우 유용합니다.

五、页face预加载(링크 프리패치)API

页face预加载(링크 프리페치)API功能能够让浏览器에서 后台静悄悄的预先加载/读取一些页face或资源到当前页face,给用户一个顺滑的使用体验：

复代码码

代码如下:

就是这5个你需要知道및尝试의 새로운 HTML5 API입니다.能更好的创造最前沿技术的웹사이트사용. 花几分钟试试这些新功能，看看你能用它们实现什么样的效果!