5가지 강력한 HTML5 API 기능 권장 사항_html5 튜토리얼 기술

HTML5는 개발자가 놀라운 데스크톱 및 모바일 애플리케이션을 구축하는 데 도움이 되는 매우 강력한 JavaScript 및 HTML API를 제공합니다. 이 기사에서는 개발 작업에 도움이 되기를 바라는 5가지 새로운 API를 소개합니다.

1. 전체화면 API

이 API를 사용하면 개발자는 프로그래밍 방식으로 웹 애플리케이션을 전체 화면에서 실행하여 웹 애플리케이션을 기본 애플리케이션과 비슷하게 만들 수 있습니다.

코드 복사

코드는 다음과 같습니다.

// 전체 보기 브라우저에 적합한 화면 메소드
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen()
} else if(element.mozRequestFullScreen) {
요소 .mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 전체 화면 모드 시작
launchFullScreen(document. documentElement); // 전체 페이지
launchFullScreen(document.getElementById("videoElement")) // 개별 요소

　2. 페이지 가시성 API(Page Visibility API)

이 API는 사용자에게 페이지의 가시성을 감지하는 데 사용할 수 있습니다. 즉, 사용자가 현재 탐색 중인 페이지 또는 탭의 상태 변경을 반환합니다.

코드 복사

코드는 다음과 같습니다.

// 숨겨진 속성을 설정하고 보이는 변경 이벤트 이름과 속성에는 브라우저 접두사
//를 추가해야 합니다. 일부 브라우저는 공급업체 접두사가 붙은 지원만 제공하기 때문입니다.
var Hidden, state, visibleChange
if (typeof document.hidden != = "정의되지 않음") {
숨겨진 = "숨김";
visibleChange = "visibilitychange";
state = "visibilityState"
} else if (typeof document.mozHidden !== "정의되지 않음" ) {
숨겨진 = "mozHidden";
visibleChange = "mozvisibilitychange";
state = "mozVisibilityState"
} else if (typeof document.msHidden !== "정의되지 않음") > Hidden = "msHidden" ;
visibleChange = "msvisibilitychange";
state = "msVisibilityState"
} else if (typeof document.webkitHidden !== "undefine") {
숨겨진 = " webkitHidden";
visibleChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// 제목 변경을 위한 리스너 추가
document.addEventListener(visibilityChange, function(e) {
// 상태 처리 시작 또는 중지
}, false);

　3.getUserMedia API 이 API를 사용하면 웹 애플리케이션이 플러그인을 사용하지 않고도 카메라와 마이크에 액세스할 수 있습니다.

코드 복사코드는 다음과 같습니다.

// 이벤트 리스너 설정
window.addEventListener("DOMContentLoaded", function() {
// 요소 가져오기
var canvas = document.getElementById("canvas"),
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) {
비디오 .src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit 접두사
navigator.webkitGetUserMedia( 스트림 ){
video.src = window.webkitURL.createObjectURL(stream);
video.play()
}, errBack)
}
},

　4. 배터리 API

주로 기기 배터리 정보를 감지하는 데 사용되는 모바일 기기 애플리케이션용 API입니다.

코드 복사코드는 다음과 같습니다.

var 배터리 = navigator.battery || navigator.mozBattery;
// 배터리 속성
console.warn("배터리 충전: ", 배터리 충전) // true
console.warn("배터리 수준: ", Battery.level); // 0.58
console.warn("배터리 방전 시간: ", Battery.dischargeTime)// 이벤트 리스너 추가
🎜>battery.addEventListener("chargechange", function(e) {
console.warn("배터리 충전 변경: ", 배터리.충전);
}, false);

5. 링크 미리 가져오기

웹페이지 콘텐츠를 미리 로드하여 시청자에게 원활한 탐색 경험을 제공하세요.

코드 복사코드는 다음과 같습니다.

위의 5가지 새로운 API에 대해 이해하셨나요? 궁금한 점이 있으면 메시지를 남겨주세요.