隨著HTML5網(wǎng)站開(kāi)發(fā)的流行，開(kāi)發(fā)者們可以盡情的將視頻、圖像、音樂(lè)添加到網(wǎng)站上。而此前微軟IE團(tuán)隊(duì)為亞洲動(dòng)物保護(hù)基金精心打造的月熊志網(wǎng)站，就是一個(gè)運(yùn)用HTML5開(kāi)發(fā)的好例子。月熊志利用HTML5標(biāo)準(zhǔn)開(kāi)發(fā)而成，引入了全新的觸控交互體驗(yàn)，讓用戶(hù)在瀏覽整個(gè)網(wǎng)站的體驗(yàn)過(guò)程中，就像翻閱一本雜志一樣輕松。

這就是HTML5技術(shù)為網(wǎng)站開(kāi)發(fā)帶來(lái)的變化，讓開(kāi)發(fā)者能夠完全不必要擔(dān)心自己的設(shè)計(jì)思路能否實(shí)現(xiàn)。而對(duì)于HTML5網(wǎng)站開(kāi)發(fā)來(lái)說(shuō)，想要讓網(wǎng)站擁有更好的顯示效果，除了技術(shù)革新，瀏覽器對(duì)于HTML5的支持也至關(guān)重要。

IE11的HTML5新變革

IE11全面支持HTML5開(kāi)發(fā)標(biāo)準(zhǔn)，同時(shí)在硬件加速方面也有著非常出色的性能。此外，IE11支持全套HTML5網(wǎng)頁(yè)開(kāi)發(fā)API，并且IE11還將對(duì)HTML5視頻等媒體資源的支持提高到了一個(gè)新的水平，在現(xiàn)行標(biāo)準(zhǔn)下開(kāi)發(fā)者能夠?qū)崿F(xiàn)比預(yù)期更加優(yōu)秀的效果。同時(shí)，開(kāi)發(fā)者們能夠使用自IE10開(kāi)始引入的Pointer API實(shí)現(xiàn)對(duì)觸控的支持。Pointer API封裝了來(lái)自觸摸、筆、的輸入，所有這些形式的輸入操作都被抽象成為統(tǒng)一的Pointers接口，這一API的添加讓開(kāi)發(fā)者可以更方便地開(kāi)發(fā)Web頁(yè)面，而這個(gè)功能也被W3C列為HTML 5的候選標(biāo)準(zhǔn)。正因?yàn)镮E11對(duì)HTML5標(biāo)準(zhǔn)的良好支持，用戶(hù)可以在“月熊志”這種運(yùn)用了大量3D、媒體元素的網(wǎng)頁(yè)體驗(yàn)完美逼真的3D月熊動(dòng)畫(huà)，實(shí)現(xiàn)快速流暢的網(wǎng)頁(yè)瀏覽。

可跨平臺(tái)流媒體服務(wù)如何實(shí)現(xiàn)？

Hit FM在線(xiàn)電臺(tái)由微軟IE團(tuán)隊(duì)與Hit FM國(guó)際流行音樂(lè)廣播共同開(kāi)發(fā)，利用了HTML5對(duì)于在線(xiàn)流媒體的良好支持，實(shí)現(xiàn)了可跨平臺(tái)無(wú)插件實(shí)時(shí)收聽(tīng)廣播的流媒體體驗(yàn)，同時(shí)3D折頁(yè)效果的網(wǎng)頁(yè)也令用戶(hù)嘖嘖稱(chēng)奇，為用戶(hù)帶來(lái)了時(shí)下最新鮮的網(wǎng)頁(yè)瀏覽體驗(yàn)。

在開(kāi)發(fā)的過(guò)程中，開(kāi)發(fā)團(tuán)隊(duì)首先需要滿(mǎn)足的就是用戶(hù)的跨平臺(tái)實(shí)時(shí)廣播體驗(yàn)，而這也一直是過(guò)去網(wǎng)絡(luò)電臺(tái)的瓶頸所在。以往在線(xiàn)收聽(tīng)廣播都需要安裝插件或者使用軟件進(jìn)行收聽(tīng)，這無(wú)疑給用戶(hù)跨平臺(tái)的體驗(yàn)造成了阻礙，畢竟在PC之外其他平臺(tái)無(wú)法提供良好的支持。HTML5的出現(xiàn)成功將這樣的局面打破。開(kāi)發(fā)團(tuán)隊(duì)通過(guò)將MMS流媒體轉(zhuǎn)換成HTML5支持的音頻流媒體格式，使用HTML5支持的<audio&gt; 標(biāo)簽實(shí)現(xiàn)無(wú)插件播放功能，用戶(hù)可以無(wú)需安裝任何插件即可在Windows、MAC平臺(tái)以及iOS、Android和WP等移動(dòng)平臺(tái)進(jìn)行收聽(tīng)。代碼示例：

var audio = new Audio();

function play(src) {

audio.src = src;

audio.play();

};

function pause() {

audio.pause();

audio.src = "";

};

$("#radio-btn").on("click", function () {

audio.paused ? play("[音頻地址]") : pause();

});

在以往的開(kāi)發(fā)中，特效的實(shí)現(xiàn)讓很多開(kāi)發(fā)者為之苦惱，因?yàn)榻?jīng)常需要復(fù)雜的代碼和Flash工具才能實(shí)現(xiàn)。但在Hit FM在線(xiàn)電臺(tái)的開(kāi)發(fā)過(guò)程中，得益于IE10對(duì)HTML5和CSS3的全面支持，開(kāi)發(fā)者們可以通過(guò)CSS3中Transform和Transition來(lái)實(shí)現(xiàn)網(wǎng)站的變形和過(guò)渡效果，給用戶(hù)帶來(lái)炫酷的視覺(jué)感受，并且在加載上也能非常流暢，輕松實(shí)現(xiàn)了Flash都望塵莫及的動(dòng)畫(huà)效果，同時(shí)在整個(gè)體驗(yàn)中沒(méi)有用到任何插件，保證了出色的用戶(hù)體驗(yàn)。

代碼示例：

bar.hammer().on("touch", function () {

// 記錄拖拽開(kāi)始時(shí)的折頁(yè)總寬度

hot.data("oldWidth", hot.width());

}).on("drag", function (evt) {

// 根據(jù)鼠標(biāo)移動(dòng)距離獲得折頁(yè)在當(dāng)前狀態(tài)的正確寬度

var newWidth = hot.data("oldWidth") + evt.gesture.deltaX;

hot.css(newWidth);

// 計(jì)算角度：90 * (1 - 當(dāng)前寬度 / 完整寬度

var deg = 90 * (1 - newWidth / hotFullWidth);

// 單數(shù)項(xiàng)和雙數(shù)項(xiàng)以相反的角度旋轉(zhuǎn)從而得到折頁(yè)效果

hotOddItems.css("transform", "rotateY(" + -deg + "deg)");

hotEvenItems.css("transform", "rotateY(" + deg + "deg)");

});

此外，在Hit FM在線(xiàn)電臺(tái)的開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)團(tuán)隊(duì)充分利用到了HTML5上的全新API，保證用戶(hù)的流暢體驗(yàn)和收聽(tīng)的持續(xù)性。借由HTML5中全新加入的History API特性，實(shí)現(xiàn)了全站AJAX（用于提升用戶(hù)訪(fǎng)問(wèn)體驗(yàn)的技術(shù)）。當(dāng)用戶(hù)在點(diǎn)擊內(nèi)容時(shí)，只會(huì)加載需要更新的內(nèi)容而不會(huì)加載外層不變的框架，同時(shí)標(biāo)題欄、地址欄以及前進(jìn)后退等按鈕也會(huì)發(fā)生變化，和全部刷新打開(kāi)一樣，并且整個(gè)過(guò)程不會(huì)影響Live Streaming的播放，大幅提升用戶(hù)體驗(yàn)。

代碼示例：

var app = $.sammy("#wrapper", function () {

// 當(dāng)頁(yè)面 hash 改為 #hits/ 時(shí)，加載 hits/ 頁(yè)面到 #wrapper 中

this.get("#hits/", function () {

this.partial('hits/').then(function () {

// 頁(yè)面載入后

});

});

});

app.run();

隨著網(wǎng)民對(duì)交互型體驗(yàn)需求的增加以及觸控設(shè)備的增多，HTML5網(wǎng)站必將是大勢(shì)所趨的網(wǎng)站形式。而移動(dòng)端的興起也讓開(kāi)發(fā)者們開(kāi)始考慮如何讓用戶(hù)在通過(guò)移動(dòng)端進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)保證多屏體驗(yàn)合一。IE11提供了對(duì)目前最新網(wǎng)絡(luò)標(biāo)準(zhǔn)HTML5的支持以及快速的性能，這將讓開(kāi)發(fā)者能夠隨心所欲地向網(wǎng)站中加入各種效果，把整個(gè)頁(yè)面變活，幫助你的網(wǎng)站展現(xiàn)出更好的效果。開(kāi)始動(dòng)手讓你的網(wǎng)站變得更酷吧！