隨著HTML5網站開發的流行，開發者們可以盡情的將視頻、圖像、音樂添加到網站上。而此前微軟IE團隊為亞洲動物保護基金精心打造的月熊志網站，就是一個運用HTML5開發的好例子。月熊志利用HTML5標準開發而成，引入了全新的觸控交互體驗，讓用戶在瀏覽整個網站的體驗過程中，就像翻閱一本雜志一樣輕松。

這就是HTML5技術為網站開發帶來的變化，讓開發者能夠完全不必要擔心自己的設計思路能否實現。而對于HTML5網站開發來說，想要讓網站擁有更好的顯示效果，除了技術革新，瀏覽器對于HTML5的支持也至關重要。

IE11的HTML5新變革

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

可跨平臺流媒體服務如何實現？

Hit FM在線電臺由微軟IE團隊與Hit FM國際流行音樂廣播共同開發，利用了HTML5對于在線流媒體的良好支持，實現了可跨平臺無插件實時收聽廣播的流媒體體驗，同時3D折頁效果的網頁也令用戶嘖嘖稱奇，為用戶帶來了時下最新鮮的網頁瀏覽體驗。

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

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

});

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

代碼示例：

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

// 記錄拖拽開始時的折頁總寬度

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

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

// 根據鼠標移動距離獲得折頁在當前狀態的正確寬度

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

hot.css(newWidth);

// 計算角度：90 * (1 - 當前寬度 / 完整寬度

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

// 單數項和雙數項以相反的角度旋轉從而得到折頁效果

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

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

});

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

代碼示例：

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

// 當頁面 hash 改為 #hits/ 時，加載 hits/ 頁面到 #wrapper 中

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

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

// 頁面載入后

});

});

});

app.run();

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