首頁 web前端 html教學 html5的這些api你知道嗎?

html5的這些api你知道嗎?

Dec 03, 2016 am 11:28 AM
api html5

以下是一些先前學習的HTML5 API的總結,在HTML5中有許多功能和介面很值得我們去了解和學習。

頁面可見性API--page Visbility

全螢幕API --full Screen

取得MediaAPI--getUserMedia

電池API --battery

資源預載API--linkfetching

電池API --battery

資源預載API--linkfetching

電池API --battery

此API可以用來偵測頁面對於使用者的可見性,也就是傳回使用者目前瀏覽的頁面或標籤tap的狀態變化。 在最小化瀏覽器、切換tap頁面時生效.(如需對app中幾個webview進行切換操作時,可使用pageVisibility介面進行相應的事件監聽和處理。)

page visibility的介紹

【document. hidden】這個值表示page是否是可見的,值為boolean值

【document.visibilityState】這個visibilitystate 可有三個值得可能:

【visible】 表示該page是處於最前面的頁面並且不是處於一個最小化的視窗

【hidden】 表示該page不是處於最前面的頁面或是處於一個最小化的視窗

【prerender】 表示該頁面內容正在重新渲染並且該頁面對於使用者是不可見的

【isibilitychange Event 】*監聽window visibility 的改變的事件

相關代碼:

// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀  // since some browsers only offer vendor-prefixed support  var hidden, state, visibilityChange;  if (typeof document.hidden !== "undefined") {  
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
  state = "visibilityState";  
} else if (typeof document.mozHidden !== "undefined") {  
  hidden = "mozHidden";  
  visibilityChange = "mozvisibilitychange";  
  state = "mozVisibilityState";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
  state = "msVisibilityState";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
  state = "webkitVisibilityState";  
} // 添加一个标题改变的监听器  document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理  }, false);
登入後複製

page visibility的用處

對於visibility的改變,我們可以怎麼用了做什麼呢。

我們可以對那些定期刷新內容的頁面進行控制,當該頁面不可見則不刷新,可見則刷新

我們還可以根據頁面的是否可見來暫停和繼續音頻,視頻的播放

我們還可以根據頁面可見去計算我們網站的使用者停留在本頁面的更為精確的數據,而不僅僅是打開頁面而不停留在本頁面。

Full Screen API全螢幕API

該API允許開發者以程式設計方式將Web應用程式全螢幕運行,使Web應用程式更像本機應用程式。十分簡單有用的api.

Full Screen 的介紹

FullScreen 的API使用非常簡單,其有兩種模式

Launching Fullscreen Mode 啟動全螢幕模式

// 找到适合浏览器的全屏方法  function launchFullScreen(element) {  if(element.requestFullScreen) {  
    element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();  
  }  
} // 启动全屏模式  launchFullScreen(document.documentElement); // the whole page  launchFullScreen(document.getElementById("videoElement")); // any individual element
登入後複製

屬性和事件

目前fullscreen 仍有相容的問題,許多能使用的瀏覽器仍需要在其對應的屬性和事件加上相關的前綴。

【document.fullScreenElement】此屬性表示啟動全螢幕的元素(如video這些)

【document.fullScreenEnabled】該屬性表示當前是否全螢幕

【fullscreenchange 事件監聽全螢幕事件的監聽全螢幕狀態改變的事件。相關

css有一些關於fullscreen的css屬性

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen();
  } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen();
  }
} // Cancel fullscreen for browsers that support it! exitFullscreen();
登入後複製

FullScreen的小結

第一次見到這個API是在看一些手機小說和移動端漫畫網站時,發現其有全屏的觀看的功能。全螢幕api目前可能存在相容性的問題,但相信不久的將來肯定會是一個使用頻率超高的api

getUserMedia API

該API允許Web應用程式存取攝影機和麥克風,而無需使用插件,該API在客戶端最先支援的,但在pc端仍不可用。

getUserMedia API 的介紹

先閱讀下下面的html

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:full-screen {
    /*pre-spec */
   /* properties */
}
:fullscreen { 
    /* spec */
   /* properties */
}
/* deeper elements */:-webkit-full-screen video {
   width: 100%;
   height: 100%;
}
/* styling the backdrop*/::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}
登入後複製

相關JS程式碼

// 设置事件监听器  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("Video capture error: ", error.code);   
    }; // 设置video监听器  if(navigator.getUserMedia) { // Standard  navigator.getUserMedia(videoObj, function(stream) {  
      video.src = stream;  
      video.play();  
    }, errBack);  
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  navigator.webkitGetUserMedia(videoObj, function(stream){  
      video.src = window.webkitURL.createObjectURL(stream);  
      video.play();  
    }, errBack);  
  }  
}, false);
登入後複製

一旦确定当前浏览器是支持getUserMedia的时, 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video,然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。

电池API(Battery API)

这是一个针对移动设备应用程序的API,主要用于检测设备电池信息。

Battery API 的介绍

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // 电池属性  console.warn("Battery charging: ", battery.charging); 
// 当前电池是否在充电 true  console.warn("Battery level: ", battery.level); 
// 0.58  console.warn("Battery discharging time: ", battery.dischargingTime); 
// 添加事件监听器  battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging);  
}, false);
登入後複製

为什么获取电池信息的api

为什么我们需要用到battery api?现在许多移动端apps都内嵌着web浏览器包装的(不再是完全native的应用)。所以我们需要一个方法去获取系统的信息,app有一些过程是`十分耗电的,然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】

Link Prefetching【预加载】

预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到

什么是link预加载

Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

<!-- full page --> <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> 
<!-- just an image --> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
登入後複製

什么时候使用link预加载是否在自己的网站使用预加载,可以参考一下几点:

当你做的是一种类似slideshow的网页,需要提前加载近1-3张页面(假设这些页面并不大)

预先加载在网站中许多网页都会用到的图片

预先加载网站搜索的结果的页面

参考链接 http://davidwalsh.name/

    

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1323
25
PHP教程
1272
29
C# 教程
1251
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles