title: HTML5新增元素

date : 2016-09-13

tags : HTML5

0X01 HTML5新增主体元素

header,nav,aside,section,article,footer

0x02 HTML5新增非主体元素

datalist

datalist 要结合 input 元素使用，并且通过的 input 的 list 属于与其关联。

progress

表示一个任务的完成进度，而且通常这些任务都在表单中启动和处理。

vaule:表示处理进度的程度

max:表示任务完成以后达到的值

meter

与 类似，用于显示刻度或精度而非进度。

output

用于显示表单元素处理的结果值。for 将 output 元素与参与计算的元素相关联起来。

0x03 HTML5新增文本框元素

email

当在 form 表单中，当输入邮箱地址提交请求时，将会自动验证输入邮箱格式是否正确

tel

tel 在主要功能作用是针对不同的设备自动跳出响应的数字键盘，这个主要是针对移动端的。它不会去验证输入的电话号码的格式。

number

number 只能接受数字类型的值。其中:

min:表示能输入的最小值

max:表示能输入的最大值

step:表示每次调整的增量

range

range 允许用户选择一范围的数值。

date

time

color

0x03 HTML5新增音视频元素

vedio

vedio 元素提供了 播放、暂停和音量控件来控制视频，也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度等

vedio 元素有如下属性值：

width/height: 设置 vedio 元素的宽度和高度

src/source: 设置视频流的存储路劲

autoplay:视频自动播放

controls:显示 video 元素自带的控制组件 controls

poster:指定一个图片路径，在视频等待播放时显示一幅图片。

preload:有三个值:none,metadata,auto。值为none 不缓存视频；metadata 播放前只加载视频的宽高等信息;auto 默认值，要求浏览器尽快下载视频。

loop:反复播放视频

视频事件

视频处理事件:

play():播放媒体文件

load():加载媒体文件，动态应用程序可以使用该方法提前加载

canPlayType(type):查看浏览器是否支持某种类型的媒体格式

progress(): 用于更新资源的下载进度，会周期性的触发。

canplaythrough():当整个媒体可以顺序播放时，触发该事件。

canplay():不考虑整体状态，只有下载了一定可放的帧变化触发该事件

针对视频处理的常用属性如下：

ended:媒体播发完成时该属性返回 true

paused:暂停播放时，该属性返回 true

duration:返回播放时长，以秒为单位

currentTime:获得或设置媒体播放位置

error:播发错误时触发

一个简单的视频处理控件

video

#videoBox{

width:600px;

height: 500px;

position: relative;

}

#contronlBtn{

border:1px solid red;

width: 40px;

height: 40px;

}

#progressVedio{

width: 400px;

}

#showTime{

width: 40px;

height: 20px;

border:1px solid red;

display: block;

position: absolute;

top:400px;

}

var contronlBtn = document.querySelector("#contronlBtn")

var videoSource = document.querySelector("#videoSource")

var progressVedio = document.querySelector("#progressVedio")

var totalTime = document.querySelector("#totalTime")

var progressTime = document.querySelector("#progressTime")

var showTime = document.querySelector("#showTime")

var timer = null;

window.onload = function(){

var countTime = parseInt(videoSource.duration)

progressVedio.max = countTime

totalTime.innerHTML = "时间:"+ parseInt(countTime/60)+":"+(countTime%60);

contronlBtn.onclick = function (){

if(videoSource.paused){

videoSource.play()

contronlBtn.innerHTML = "Pause"

}else if(videoSource.play){

videoSource.pause()

contronlBtn.innerHTML = "Play"

}

}

timer = setInterval(function(){

var nowTime = parseInt(videoSource.currentTime)

progressVedio.value = nowTime

progressTime.innerHTML = parseInt(nowTime/60) + ":" + (nowTime%60);

},1000)

progressVedio.onmouseover = function(event){

var mourseTime = parseInt(countTime/progressVedio.offsetWidth*(event.clientX - progressVedio.offsetLeft))

showTime.innerHTML = ""+ parseInt(mourseTime/60)+":"+(mourseTime%60);

showTime.style.left = event.clientX + "px"

}

progressVedio.onclick = function(event){

videoSource.currentTime = countTime/progressVedio.offsetWidth*(event.clientX - progressVedio.offsetLeft)

}

}