HTML5的这些api你知道吗

这篇具有很好参考价值的文章主要介绍了HTML5的这些api你知道吗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 事件】 监听全屏状态改变的事件

2.2 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

<!--
    正常正确情况下,使用video等元素,我们是需要在确认客户端是支持该元素时才
    回相应地用js创建这些元素,但通过使用getUserMedia api,
    我们即可在html中直接创建这些元素(而不需要用js来创建),
-->
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>

复制

相关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" />

复制文章来源地址https://www.toymoban.com/news/detail-481501.html

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

  • 当你做的是一种类似slideshow的网页,需要提前加载近1-3张页面(假设这些页面并不大)
  • 预先加载在网站中许多网页都会用到的图片
  • 预先加载网站搜索的结果的页面

到了这里,关于HTML5的这些api你知道吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 说一下 HTML5 drag API

    说一下 HTML5 drag API dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。 darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。 dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。 dragover:事件主体是目标元素,在被拖放在某元素内移动时触

    2024年02月16日
    浏览(52)
  • 引用jquery.js的html5基础页面模板

    本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。 当你着手从0到1去书写一个html页面

    2024年02月04日
    浏览(41)
  • 音频播放器Web页面代码实例(基于HTML5)

    音频播放器Web页面代码实例(基于HTML5):   特别需要注意的点:     如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。     如果上传文件时设置了\\\"源文件播放\\\",平台不会对源文件进行

    2024年02月16日
    浏览(39)
  • HTML5 API 多端通信桥 MessageChannel 技术

    这个特别有意思,可以将其理解为通信桥的概念,桥有两个端(port1,port2)只要将port1,port2指定到任意两个进程,无论是iframe-iframe,iframe-worker,parent-child-iframe,worker-worker等,只要搭好,两者就可以实时通信了。这解决了让parent作为中转站这种头大的问题,以下是该技术调

    2024年02月14日
    浏览(34)
  • 初学者的HTML5 Geolocation API入门指南!

    文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 HTML 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。 HTML5 提供了一个 Geolocation API,在平时的开发过程中,常使用 Geolocation API 获取用户设

    2024年04月28日
    浏览(52)
  • HTML5 Canvas API制作一个简单的猜字单机游戏

    这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字单机游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下 HTML代码 !doctype html   html lang=\\\"en\\\"       head           meta charset=\\\"utf-8\\\" /           script 

    2024年02月16日
    浏览(47)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外,中间的区域(主体区域)划分成了三个栏目,分别是左侧边栏、内容区域和右侧边栏,这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时,页面中左侧边栏和右侧边栏的宽度固定不变,而内容区域的

    2024年01月17日
    浏览(85)
  • [HTML]Web前端开发技术13(HTML5、CSS3、JavaScript )横向二级导航菜单 Web页面设计实例——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 横向二级导航菜单 Web页面设计实例 总结 该练的还是要练,终究是自己的! 网页标题:二级下拉导航

    2024年01月17日
    浏览(73)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(64)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包