陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

HTML5揭秘(二)

1、time标签

<time datetime="2016-04-23" pubdate>April 23, 2016</time>
  • datetime: 一个机器可识别的时间戳
  • pubdate: 如果在time标签在一个article标签里,则表示该时间戳是文章发表的时间;如果time标签不在article标签里,则表示该时间戳是整个文档发表的时间。
  • time开始和结束标签中间的文本内容随便写,不对语义产生影响;但是,既然包裹在time标签中,则最好还是写时间吧。

2、视频

<video width="" height="">
<source src="", type='video/webm; codecs="vp8, vorbis"'>
</video>

video标签中可以放置多个source标签(兼容),source标签中的type属性可以帮助浏览器识别是否支持该格式的视频,如果支持则下载播放,否则会不下载。codecs属性的第一个值为视频编解码器,第二个为音频编解码器。

  • play() & pause()控制视频播放
  • currentTime,volume,muted:可读写属性
  • preload:是否在页面加载时下载视频,如果不需要可以设置<video preload="none"></video>
  • autoplay: 自动播放

3、地理位置

mordernizr查询是否支持(容错处理)

// getCurrentPosition()方法需要一个回调函数当作参数,并且会传递一个参数给该回调,该参数包含用户当前的位置信息
if(mordernizr.geolocation) {
	navigator.geolocation.getCurrentPosition(success_back);
} else {

}

// 容错处理:因为获取用户信息可能会发生种种错误,所以getCurrentPosition方法可以传入第二个
// 回调方法当参数,如果报错会有错误参数传入该回调方法。
navigator.geolocation.getCurrentPositionsuccess_backerror_back);

// 第三个可选参数:positionOptions对象
{
	enableHighAccuracy: boolean,	开启高精度定位,在androidios中需要权限
	timeout: long 单位毫秒,网络请求最大允许时间
	maximumAgelong,单位毫秒,请求结果的有效期,如果在有效期内,则不请求新的数据直接返回该有效期内请求过的数据
}

持续获取位置信息

// watchPosition()方法,需要的参数同getCurrentPosition方法一样

4、window.onload

window.onload方法在页面所有图片加载完之后才会被调用,所以如果页面上有大量图片,则需要等很久才会被触发。