网页制作：HTML5 标准提供了哪些新的 API

Posted 2023-04-04

参考技术A 以下是之前学习的一些html5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。
页面可见性API--page Visbility
全屏API --full Screen
获取MediaAPI--getUserMedia
电池API --battery
资源预加载API--link Prefetching
Page Visibility 页面可见性API
该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

Exit FullScreen Mode 退出全屏模式
// 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();

Full Screen 的相关属性和事件
目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。
【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）
【document.fullScreenEnabled】该属性表示当前是否全屏
【fullscreenchange 事件】 监听全屏状态改变的事件
Full Scrren 的相关
css有一些关于fullscreen的css属性
-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 */

FullScreen的小结
第一次见到这个API是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api
getUserMedia API
该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。
getUserMedia API 的介绍
先阅读下下面的html
Snap Photo

相关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【预加载】
预加载网页内容为浏览者提供一个平滑的浏览体验。这个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张页面（假设这些页面并不大）
预先加载在网站中许多网页都会用到的图片
预先加载网站搜索的结果的页面

h5新增加哪些新api”

参考技术A 随着微信用户增多、H5小游戏、H5大翻页，到H5站点、H5营销。在微信上内容的数量和样式的逐渐增多，下面给大家介绍借助 布谷鸟 这一个在线制作工具，可以轻松的制作出炫酷的微信h5页面。
点击制作栏目，进入模板选择页
1：选择空模板，自由创作、选择主题模板，更快速的创作出炫丽的展示。
预览树操作
2：显示的页面的显示顺序；
右键调整页面的显示顺序；
3、点击页面右上角的X,可以把不需要的页面删除。
4.功能—添加修改文字
1、添加文字：点击右侧的文字选项→主编辑区会出现文字输入框→双击修改
2、文字属性修改：右侧文字属性修改选项，包括字体种类，字体大小、颜色等等。
功能—添加修改按钮
添加按键：点击右侧按钮选项→点击编辑区的按钮→修改文字、链接
5.功能—添加修改底图
1、修改背景颜色：点击右侧底图选项→选择颜色
2、上传底图：点击右侧底图选项→点击上传按钮→确定
6：保存。生成
1、添加标题、描述、缩略图
2、生成的二维码和链接可以用于分享到微信、微博等
3、点击生成按钮，即完成了一个作品的制作过程。