title: HTML5新增元素
date : 2016-09-13
tags : HTML5
0X01 HTML5新增主體元素
header,nav,aside,section,article,footer
0x02 HTML5新增非主體元素
datalist
datalist 要結(jié)合 input 元素使用倔监，并且通過的 input 的 list 屬于與其關(guān)聯(lián)臣缀。
<input type="text" id="list" list="showData">
<datalist id="showData">
<option value="boy"></option>
<option value="girl"></option>
<option value="woman"></option>
<option value="man"></option>
</datalist>
progress
表示一個任務(wù)的完成進度毕贼，而且通常這些任務(wù)都在表單中啟動和處理剔难。
<progress value="10" max="50">
vaule:表示處理進度的程度
max:表示任務(wù)完成以后達到的值
meter
與 <progress> 類似，用于顯示刻度或精度而非進度这刷。
<meter max="100" min="25" low="40" hight="100" optimum="50" value="15"></meter>
output
用于顯示表單元素處理的結(jié)果值环疼。for 將 output 元素與參與計算的元素相關(guān)聯(lián)起來。
0x03 HTML5新增文本框元素
<input type="email" />
當(dāng)在 form 表單中呜投，當(dāng)輸入郵箱地址提交請求時加匈，將會自動驗證輸入郵箱格式是否正確
tel
<input type="tel" />
tel 在主要功能作用是針對不同的設(shè)備自動跳出響應(yīng)的數(shù)字鍵盤，這個主要是針對移動端的宙彪。它不會去驗證輸入的電話號碼的格式矩动。
number
<input type="number" step="10" min="100" max="1000"/>
number 只能接受數(shù)字類型的值。其中:
min:表示能輸入的最小值
max:表示能輸入的最大值
step:表示每次調(diào)整的增量
range
<input type="range" min="1000" max="15000" step="1000" value="5000" />
range 允許用戶選擇一范圍的數(shù)值释漆。
date
time
color
0x03 HTML5新增音視頻元素
vedio
vedio 元素提供了 播放悲没、暫停和音量控件來控制視頻，也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度等
vedio 元素有如下屬性值：
-
width/height: 設(shè)置vedio元素的寬度和高度 -
src/source: 設(shè)置視頻流的存儲路勁 -
autoplay:視頻自動播放 -
controls:顯示video元素自帶的控制組件controls -
poster:指定一個圖片路徑男图，在視頻等待播放時顯示一幅圖片示姿。 -
preload:有三個值:none,metadata,auto。值為none不緩存視頻逊笆；metadata播放前只加載視頻的寬高等信息;auto默認(rèn)值栈戳，要求瀏覽器盡快下載視頻。 -
loop:反復(fù)播放視頻
<video src="臭屁蟲2.mp4" width="400" height="400" controls="controls" autoplay="autoplay" loop="loop" ></video>
視頻事件
視頻處理事件:
-
play():播放媒體文件 -
load():加載媒體文件难裆，動態(tài)應(yīng)用程序可以使用該方法提前加載 -
canPlayType(type):查看瀏覽器是否支持某種類型的媒體格式 -
progress(): 用于更新資源的下載進度子檀，會周期性的觸發(fā)。 -
canplaythrough():當(dāng)整個媒體可以順序播放時乃戈，觸發(fā)該事件褂痰。 -
canplay():不考慮整體狀態(tài)银室，只有下載了一定可放的幀變化觸發(fā)該事件
針對視頻處理的常用屬性如下：
-
ended:媒體播發(fā)完成時該屬性返回true -
paused:暫停播放時衙傀，該屬性返回true -
duration:返回播放時長，以秒為單位 -
currentTime:獲得或設(shè)置媒體播放位置 -
error:播發(fā)錯誤時觸發(fā)
一個簡單的視頻處理控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>video</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="videoBox">
<video id="videoSource" src="臭屁蟲4.mp4" width="400" height="400" controls="controls" autoplay="autoplay" loop="loop" ></video>
<span id="showTime"></span>
<button id="contronlBtn">播放</button>
<progress id="progressVedio" value="0" max=""></progress>
<span id="progressTime"></span>
<span id="totalTime"></span>
</div>
</body>
<script type="text/javascript">
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)
}
}
</script>
</html>
