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

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

IE11的HTML5新變革

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

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

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

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

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();

});

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

代碼示例：

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

// 記錄拖拽開始時(shí)的折頁總寬度

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

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

// 根據(jù)鼠標(biāo)移動(dòng)距離獲得折頁在當(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)從而得到折頁效果

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

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

});

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

代碼示例：

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

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

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

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

// 頁面載入后

});

});

});

app.run();

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