HTML5中的視頻標(biāo)簽和及其模仿視頻播放器的效果在一些手機(jī)端應(yīng)用比較多。因?yàn)槭謾C(jī)端基本上廢除了flash的獨(dú)斷，讓HTML5當(dāng)家做主人，所以對(duì)視頻支持的比較好。所以今天專(zhuān)門(mén)為大家奉上HTML5視頻標(biāo)簽?zāi)M視頻播放器的小例子，讓大家更好的理解HTML5和有效的應(yīng)用在項(xiàng)目中。　　HTML代碼<!– src中放上本地的ogv的音頻 –> <video id="v1" src="Intermission-Walk-in.ogv"></video> <p id="p1"> <input type="button" value="播放" /> &

1. HTML5實(shí)戰(zhàn)與剖析之媒體元素(6、視頻實(shí)例)

簡(jiǎn)介：　　HTML5中的視頻標(biāo)簽和及其模仿視頻播放器的效果在一些手機(jī)端應(yīng)用比較多。因?yàn)槭謾C(jī)端基本上廢除了flash的獨(dú)斷，讓Html5當(dāng)家做主人，所以對(duì)視頻支持的比較好。所以今天專(zhuān)門(mén)為大家奉上HTML5視頻標(biāo)簽?zāi)M視頻播放器的小例子，讓大家更好的理解HTML5和有效的應(yīng)用在項(xiàng)目中。

2. HTML5實(shí)戰(zhàn)與剖析之WebSockets簡(jiǎn)介

簡(jiǎn)介：　　HTML5 WebSockets規(guī)范定義了一個(gè)API,允許web頁(yè)面使用WebSockets協(xié)議與遠(yuǎn)程主機(jī)雙向溝通。介紹了WebSocket接口,并定義了一種全雙工通信通道,通過(guò)一個(gè)套接字在網(wǎng)絡(luò)上。Html5 WebSockets提供極大的減少了不必要的網(wǎng)絡(luò)流量和延遲而不能攀登的輪詢(xún)和長(zhǎng)輪詢(xún)的解決方案是用來(lái)模擬全雙工連接通過(guò)維護(hù)兩個(gè)連接。

3. HTML5實(shí)戰(zhàn)與剖析之歷史管理(history對(duì)象)

簡(jiǎn)介：　　HTML5新添加了對(duì)歷史的管理，更新了history對(duì)象讓管理歷史狀態(tài)更加方便了。在現(xiàn)代Web應(yīng)用中，用戶(hù)可以通過(guò)”前進(jìn)”和”后退”按鈕進(jìn)行歷史頁(yè)面的切換。這讓一些不在新頁(yè)面中打開(kāi)的新頁(yè)面前進(jìn)后退自如，提高了用戶(hù)體驗(yàn)。

4. HTML5實(shí)戰(zhàn)與剖析之媒體元素(5、音頻實(shí)例)

簡(jiǎn)介：　　之前已經(jīng)介紹過(guò)了HTML5中媒體元素的相關(guān)小概念，和一些事件方法。光有一些理論基礎(chǔ)，沒(méi)有實(shí)踐實(shí)例是不能充分理解的，更不太可能靠小概念來(lái)進(jìn)行實(shí)際操作的。所以今天為大家奉上一個(gè)有關(guān)模擬音樂(lè)播放器小例子。希望大家通過(guò)這個(gè)下例子能夠更好的理解和運(yùn)用Html5中的媒體元素。

5. HTML5實(shí)戰(zhàn)與剖析之媒體元素(4、檢測(cè)編解碼器的支持和Audio構(gòu)造函數(shù))

簡(jiǎn)介：　雖然媒體元素可以實(shí)現(xiàn)音頻和視頻功能，但是并不是所有瀏覽器都支持video標(biāo)簽和audio標(biāo)簽的所有編解碼器，這意味著開(kāi)發(fā)人員必須提供很多歌媒體來(lái)源。

6. HTML5實(shí)戰(zhàn)與剖析之媒體元素(2、媒體元素的屬性)

簡(jiǎn)介：　　提到HTML5中的媒體元素，那咱們可有的聊了，剛剛介紹完媒體元素的用法與簡(jiǎn)介，還沒(méi)介紹有關(guān)媒體元素的相關(guān)屬性呢，所以今天就為大家介紹一些有關(guān)Html5中媒體元素的相關(guān)屬性。

7. HTML5實(shí)戰(zhàn)與剖析之媒體元素(3、媒體元素的事件及方法)

簡(jiǎn)介：　　HTML5中的媒體元素除了擁有很多的屬性之外，video標(biāo)簽和audio標(biāo)簽還可以出發(fā)很多事件和方法。這些方法監(jiān)控著不同的屬性的變化，這些變化有可能是媒體播放的結(jié)果，也可能是用戶(hù)操作媒體的結(jié)果。下面就為大家開(kāi)始介紹媒體元素的相關(guān)事件。

8. HTML5實(shí)戰(zhàn)與剖析之媒體元素(1、video標(biāo)簽和audio標(biāo)簽簡(jiǎn)介)

簡(jiǎn)介：　　隨著HTML5的到來(lái)，flash在手機(jī)端全部不能得到支持，這就使一項(xiàng)以flash制作的音樂(lè)播放和視頻播放只能用Html5中的媒體標(biāo)簽video標(biāo)簽和audio標(biāo)簽來(lái)制作了。很恰巧的是，移動(dòng)端對(duì)HTML5中的媒體標(biāo)簽video標(biāo)簽和audio標(biāo)簽支持的非常好。這就使HTML5在移動(dòng)端很流行。

9. HTML5實(shí)戰(zhàn)與剖析之原生拖拽(四可拖動(dòng)dragable屬性和其他成員)

簡(jiǎn)介：　　之前我們已經(jīng)為大家介紹過(guò)幾篇有關(guān)HTML5中原生拖拽的相關(guān)知識(shí)了。今天為大家介紹Html5拖拽中的其他一些小東東，閑話(huà)不多說(shuō)趕快一起看看吧。

10. HTML5實(shí)戰(zhàn)與剖析之原生拖拽(三dataTransfer對(duì)象)

簡(jiǎn)介：　　雖然通過(guò)dragstart、drag和dragend事件實(shí)現(xiàn)了原生拖拽。但是這僅僅是拖拽，在IE6和IE7中還是有些拖拽問(wèn)題，并且也沒(méi)有實(shí)現(xiàn)數(shù)據(jù)的交換。為了實(shí)現(xiàn)數(shù)據(jù)的交換，IE5引入了dataTransfer對(duì)象。dataTransfer對(duì)象是事件對(duì)象的一個(gè)屬性，用于從被拖拽元素相放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。因?yàn)樗鞘录?duì)象的屬性，所以只能在拖放事件的事件處理程序中訪(fǎng)問(wèn)dataTransfer對(duì)象。在事件處理程序中，可以使用這個(gè)對(duì)象的屬性和方法來(lái)完善拖放功能。