H5視頻播放

 

 

1.語義標籤解決方案

 

<video></video>

屬性：

　　controls 顯示控制欄

　　autoplay 自動播放

　　loop  設置循環播放

多媒體標籤在網頁中的兼容效果方式

<video>

　　<source src="1.mp4"></source>

　　<source src="1.ogg"></source>

　　<source src="1.webm"></source>

</video>

視頻的格式有3種，這樣寫，若是當前的瀏覽器支持第一種，那麼她就不會加載其餘2種，若是不支持第1種，支持第2種也是這樣，不加載第一種和最後一種。

 

2.新表單元素及屬性

　　a.智能表單控件　　　　

　　　　<input type="email">

　　　　email：輸入合法的郵箱地址

　　　　url：輸入合法的網址

　　　　number：只能輸入數字

　　　　range：滑塊

　　　　color：拾色器

　　　　date：顯示日期

　　　　month：顯示月份

　　　　week：顯示第幾周

　　　　time：顯示時間

 

　　b.表單屬性 　

 

　　　　form屬性

　　　　<form action="" autocomplete="off" novalidate = true></form>

　　　　autocomplete    on\off          自動完成

　　　　novalidate        true|false       是否關閉校驗

　　

　　　　input屬性

　　　　autofocus 自動獲取焦點

　　　　form 若是有個input在form表單單外面，可是要用from表單裏面的input【submit】來提交

　　　　<form id="test">

　　　　　　<input type="text" >

　　　　　　<input type="submit">

　　　　</form>

　　　　<input type="text" form="test">

 

　　　　list 

　　　　<input type="text" list="abc">

　　　　<datalist id="abc">

　　　　　　<option value="123">123</option>

　　　　　　<option value="124">124</option>

　　　　　　<option value="125">125</option>

　　　　</datalist>

 

　　　　multiple 實現多選效果

　　　　placeholder 佔位符（提示信息）

　　　　required 必填項

 

3.html5的API

　　獲取頁面元素及類名操做和自定義屬性

　　　js方式

　　　　document.querySelector("選擇器")

　　　　備註：

　　　　　　選擇器：能夠是css中任意一種選擇器

　　　　　　經過該選擇器只能選中第一個元素

　　　　

　　　　document.querySelectorAll("選擇器");
　　　　備註：
　　　　　　與document.querySelector區別： querySelectorAll 能夠選中全部符合選擇器規則的元素，返回的是一個列表。

 　　　　　  querySelector返回的只是單獨的一個元素

　　

　　Dom.classList.add("類名"): 給當前dom元素添加類樣式

　   Dom.classList.remove("類名"); 給當前dom元素移除類樣式

　　classList.contains("類名"); 檢測是否包含類樣式

　　classList.toggle("active"); 切換類樣式（有就刪除，沒有就添加）

例子：

　　

效果：

 自定義屬性　

　　data-自定義屬性名
　　備註：
　　　　在標籤中，以data-自定義名稱

　　　　1. 獲取自定義屬性 Dom.dataset 返回的是一個對象

　　　　　Dom.dataset.屬性名 或者 Dom.dataset[屬性名]

　　　　注意： 
　　　　　　屬性名是不包含data-

 

　　　　2. 設置自定義屬性
　　　　Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；

　

  文件讀取

　　FileReader
　　FileReader 接口有3個用來讀取文件方法返回結果在result中
　　readAsBinaryString ---將文件讀取爲二進制編碼
　　readAsText ---將文件讀取爲文本
　　readAsDataURL ---將文件讀取爲DataURL　　

　　☞ FileReader 提供的事件模型
　　　　onabort 中斷時觸發
　　　　onerror 出錯時觸發
　　　　onload 文件讀取成功完成時觸發
　　　　onloadend 讀取完成觸發，不管成功或失敗
　　　　onloadstart 讀取開始時觸發
　　　　onprogress 讀取中

　　獲取網絡狀態

　　　　☞ 獲取當前網絡狀態
　　　　　　window.navigator.onLine 返回一個布爾值

　　　　☞ 網絡狀態事件
　　　　　　1. window.ononline
　　　　　　2. window.onoffline
　　　　　　

　　　　獲取地理定位

　　　　☞ 獲取一次當前位置
　　　　　　window.navigator.geolocation.getCurrentPosition(success,error);

　　　　　　1. coords.latitude 維度
　　　　　　2. coords.longitude 經度

　　　　☞ 實時獲取當前位置
　　　　　　window.navigator.geolocation.watchPosition(success,error);

 

　　　　本地存儲

　　　　　　☞發展：
　　 隨着互聯網的快速發展，基於網頁的應用愈來愈廣泛，同時也變的愈來愈複雜，爲了知足各類各樣的需求，會常常性在本地存儲大量的數據，傳統方式咱們以document.coo進行存儲的，可是因爲其存儲大小隻有4k左右，而且解析也至關的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案，使用sessionStorage和localStorage存儲數據。

　　　　　　

　　　　　　☞ localStorage：
　　　　　　　　1. 永久生效
　　　　　　　　2. 多窗口共享
　　　　　　　　3. 容量大約爲20M

　　　　　　◆window.localStorage.setItem(key,value) 設置存儲內容
　　　　　　◆window.localStorage.getItem(key) 獲取內容
　　　　　　◆window.localStorage.removeItem(key) 刪除內容
　　　　　　◆window.localStorage.clear() 清空內容

　　　　　　☞ sessionStorage：
　　　　　　　　1. 生命週期爲關閉當前瀏覽器窗口
　　　　　　　　2. 能夠在同一個窗口下訪問
　　　　　　　　3. 數據大小爲5M左右

　　　　　　　　◆window.sessionStorage.setItem(key,value)
　　　　　　　　◆window.sessionStorage.getItem(key)
　　　　　　　　◆window.sessionStorage.removeItem(key)
　　　　　　　　◆window.sessionStorage.clear()

　　　　操做多媒體

　　　　http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp