15 HTML5 API 15-1 偵測瀏覽器的HTML5支援 15-2 HTML5的音效與視訊 15-3 HTML5的繪圖

15-1 偵測瀏覽器的HTML5支援 15-1-1 使用JavaScript程式碼偵測HTML5的支援 15-1-2 使用JavaScript函數庫偵測HTML5的支援

15-1-1 使用JavaScript程式碼偵測HTML5的支援-說明 在客戶端可以使用JavaScript程式碼偵測HTML5的支援，即檢查指定物件是否存在、HTML5標籤是否允許建立、是否可以執行特定方法和指定特定屬性。

15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援特定的HTML5 API 對於HTML5 API來說，我們可以使用if/else條件加上存取HTML5 API物件的程式碼來判斷是否支援特定功能，例如：定位服務的geolocation物件，如下所示： if (navigator.geolocation) g.innerHTML = "支援"; else g.innerHTML = "不支援"; if條件如果傳回存在，即true，表示支援此功能。

15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援HTML5新增的標籤 對於HTML5新增的標籤，我們可以使用createElement()方法來建立標籤物件後，呼叫其支援的方法，如果成功，就表示支援此標籤，如下所示： if ( document.createElement('canvas'). getContext('2d') ) c.innerHTML = "支援"; else c.innerHTML = "不支援";

15-1-1 使用JavaScript程式碼偵測HTML5的支援-判斷是否支援HTML5新增的屬性 如果是HTML5新增的屬性，例如：<input>標籤的type屬性，如下所示： var i = document.createElement("input"); i.setAttribute("type", "email"); if (i.type !== "text") $('#type').html("支援"); else $('#type').html("不支援");

15-1-2 使用JavaScript函數庫偵測HTML5的支援-說明 除了使用JavaScript程式碼偵測HTML5的支援外，我們也可以使用一些網路上免費的JavaScript函數庫，最著名的是Modernizr，其官方網址為：http://www.modernizr.com。 我們只需從官方網站下載JavaScript函數庫的程式碼檔案，以本書為例的檔名是modernizr.custom.94825.js（也可以使用NuGet組件安裝），然後使用<script>標籤含括此JavaScript函數庫，如下所示： <script src="modernizr.custom.94825.js"></script>

15-1-2 使用JavaScript函數庫偵測HTML5的支援-使用 使用Modernizr物件屬性判斷HTML5的支援，如下所示： if (Modernizr.geolocation) $('#geo').html("支援"); else $('#geo').html("不支援"); if/else條件判斷是否支援HTML5的定位服務。判斷<input>標籤是否支援type屬性值email，如下所示： if (Modernizr.inputtypes.email) $('#type').html("支援"); $('#type').html("不支援");

15-2 HTML5的音效與視訊 15-2-1 <audio>與<video>標籤 15-2-2 控制音效的播放 15-2-3 控制視訊的播放

15-2-1 <audio>與<video>標籤-<audio>標籤 在HTML5之前播放音效或視訊檔案並沒有標準，一般來說，瀏覽器需要安裝外掛程式才能播放音效或視訊檔案，而且，不同瀏覽器需要自行安裝不同的外掛程式，才能在網頁上播放音效或視訊檔案。 HTML5的<audio>標籤可以讓瀏覽器原生播放音效檔案，支援3種音效格式：MP3、Wav和Ogg，如下所示： <audio src="Kalimba.mp3" controls></audio> 標籤有controls屬性，可以顯示控制面板來播放src屬性值的音效檔案。

15-2-1 <audio>與<video>標籤- <audio>標籤屬性 說明 autoplay 指定音效檔案在網頁載入後，就自動播放，屬性值可以不指定，或是autoplay controls 指定顯示播放音效的控制面板，例如：播放或暫停按鈕，屬性值可以不指定，或是controls loop 指定音效檔案會循環播放，當播放完畢，就會自動重複播放，屬性值可以沒有，或是loop preload 指定當載入網頁同時載入音效檔，如果有指定autoplay屬性，此屬性沒有作用，屬性值none是不預載；auto是自動預載整個檔案；metadata只預載音效檔案資訊 muted 指定目前狀態是靜音，屬性值可以沒有，或是muted src 指定音效檔案的URL網址，或同一網站的檔案路徑

15-2-1 <audio>與<video>標籤- <source>標籤 因為瀏覽器支援的音效格式不同，為了跨瀏覽器相容，我們可以使用<source>標籤提供<audio>和之後的<video>標籤有多種檔案格式來選擇，每一個<source>標籤指定一個檔案，可以讓瀏覽器依支援的格式選擇播放的檔案，如下所示： <audio controls="controls"> <source src=" Kalimba.ogg" type="audio/ogg" /> <source src=" Kalimba.mp3" type="audio/mpeg" /> <p>你的瀏覽器不支援HTML5的Audio元素</p>. </audio> <audio>標籤擁有2個<source>子標籤，分別提供ogg和mp3格式的音效檔案，<p>標籤是當瀏覽器不支援時，顯示的訊息文字。

15-2-1 <audio>與<video>標籤- <video>標籤 HTML5的<video>標籤可以使用原生方式，在瀏覽器播放視訊檔案或串流，如下所示： <video controls autoplay poster="sample.jpg" width="320" height="240"> <source src="sample.ogv"/> <source src="sample.mp4"/> <source src="sample.webm"/> <p>很抱歉！您的瀏覽器不支援HTML5 Video.. <a href="sample.mp4">下載MP4視訊檔</a></p> </video> <video>標籤如同<audio>標籤，可以使用<source>子標籤指定視訊檔案。

15-2-1 <audio>與<video>標籤- <video>標籤屬性 <audio>標籤支援的三種視訊格式檔案，即.mp4 = H.264 + AAC、.ogg/.ogv = Theora + Vorbis和.webm = VP8 + Vorbis。 <video>標籤除了支援之前<audio>標籤的屬性外，專屬屬性的說明，如下表所示： 屬性 說明 height 指定視訊播放器的高 width 指定視訊播放器的寬 poster 當視訊檔案在下載時顯示的圖片，或直到使用者按下播放鈕前顯示的圖片

15-2-1 <audio>與<video>標籤- 瀏覽器支援的視訊和音效檔案格式 Internet Exporer 9+ mp4 mp3、wav FireFox 3.6+ ogg/ogv、webm ogg、wav Opera 10.5+ Chrome 6+ mp4、ogg/ogv、webm ogg、mp3 Safari 5+ 支援mp4

15-2-1 <audio>與<video>標籤- 範例 在ASP.NET程式使用2個<audio>標籤播放音樂檔案；1個<video>標籤播放視訊檔案，並且使用<source>標籤提供多種格式的媒體檔案，如右圖所示：

15-2-2 控制音效的播放- 取得HTMLAudioElement物件 在<audio>標籤可以顯示預設控制面板來控制播放，當然，我們也可以自行使用JavaScript的getElementById()方法取得<audio>標籤的HTMLAudioElement物件（這是介面）後，呼叫相關方法來控制音效的播放，如下所示： var myAudio = document.getElementById("myAudio"); 上述程式碼是JavaScript。jQuery取得HTMLAudioElement物件的程式碼，如下所示： var myAudio = $("#myAudio")[0];

檢查是否支援參數string的MIME類型，支援傳回true；否則為false 15-2-2 控制音效的播放- 相關方法 在取得HTMLAudioElement物件後，就可以呼叫相關方法（繼承自HTMLMediaElement物件，這是介面），其說明如下表所示： 方法 說明 play() 播放音效或音樂檔案 pause() 暫停播放音效或音樂檔案 canPlayType(string) 檢查是否支援參數string的MIME類型，支援傳回true；否則為false

15-2-2 控制音效的播放- 相關屬性 HTMLAudioElement物件的相關屬性說明（繼承自HTMLMediaElement物件），如下表所示： 屬性 說明 volume 播放音量，其值是0~1 currentTime 目前播放位置的秒數 duration 音效或音樂檔案的長度，單位是秒數

調整音量是註冊change事件來更改volume屬性值，如下所示： 15-2-2 控制音效的播放- 調整音量 調整音量是註冊change事件來更改volume屬性值，如下所示： $('#volume').bind("change", function () { var myAudio = $("#myAudio")[0]; myAudio.volume = parseFloat(this.value / 10); }); volume是<input type="range"/>捲動軸欄位，事件處理的匿名函數可以依取得值調整音量。

15-2-2 控制音效的播放- 顯示播放時間 顯示播放時間是註冊HTMLAudioElement物件的timeupdate事件，如下所示： $('#myAudio').bind("timeupdate", function () { var s1 = parseInt(this.currentTime % 60); var m1 = parseInt((this.currentTime / 60) % 60); var s2 = parseInt(this.duration % 60); var m2 = parseInt((this.duration / 60) % 60); $('#duration').html(m1 + "分:" + s1 + "秒 / " + m2 + "分:" + s2 + "秒"); });

15-2-2 控制音效的播放-範例 在ASP.NET程式建立<audio>標籤，但沒有控制面板，然後使用標籤物件的相關方法自行控制音效播放，和顯示相關播放資訊（使用Opera Mobile Emulator），如右圖所示：

15-2-3 控制視訊的播放- 取得HTMLVideoElement物件 HTML5的<video>標籤是在DOM樹建立HTMLVideoElement物件（繼承自HTMLMediaElement物件）的節點，取得此物件的程式碼，如下所示： var myVideo = document.getElementById("myVideo"); var myVideo = $("#myVideo")[0]; 程式碼分別使用JavaScript和jQuery取得物件，然後就可以呼叫相關方法來播放視訊和暫停視訊的播放，使用屬性取得目前的播放狀態，或使用DOM事件來進一步控制視訊的播放。

呼叫相關方法來播放視訊和暫停視訊的播放，如下表所示： 15-2-3 控制視訊的播放- 相關方法 呼叫相關方法來播放視訊和暫停視訊的播放，如下表所示： 方法 說明 play() 開始播放視訊 pause() 暫停播放視訊

15-2-3 控制視訊的播放- 相關屬性 屬性 說明 currentTime 目前播放位置的秒數 paused 檢查目前是否暫停播放，是傳回true；否傳回false muted 檢查是否是靜音，是傳回true；否傳回false volume 取得或設定音量值，值是0~1 ended 檢查是否已經播放到最後，是傳回true；否傳回false duration 視訊檔案的長度，單位是秒數 videoWidth 唯讀屬性，原始視訊尺寸的寬度 videoHeight 唯讀屬性，原始視訊尺寸的高度 width 存取<video>標籤尺寸的寬度，即標籤的width屬性 height 存取<video>標籤尺寸的高度，即標籤的height屬性

15-2-3 控制視訊的播放- 常用事件 HTMLAudioElement和HTMLVideoElement物件都可以註冊HTMLMediaElement的事件，常用事件的說明，如下表所示： 事件 說明 ended 當播放至視訊的最後時觸發，並且將ended屬性設為true pause 當呼叫pause()方法後觸發 play 當呼叫play()方法後觸發 timeupdate 當currentTime屬性值改變時觸發 volumechange 當volume或muted屬性值改變時觸發

15-2-3 控制視訊的播放-範例 在ASP.NET程式建立<video>標籤，但沒有控制面板和自動播放後，使用標籤物件的相關方法來自行控制視訊的播放，和顯示播放的相關資訊（使用Opera Mobile Emulator），如右圖所示

15-3 HTML5的繪圖 15-3-1 使用JavaScript在Canvas元素繪圖 15-3-2 繪出長方形 15-3-3 繪出直線與多邊形 15-3-4 繪出圓形 15-3-5 顯示圖片 15-3-6 繪出文字內容

15-3-1 使用JavaScript在Canvas元素繪圖- 說明 HTML5 提供繪圖功能，可以讓我們在<canvas>標籤建立的方框中，使用JavaScript程式碼呼叫Canvas API在網頁上繪出2D圖形，即CanvasRenderingContext2D物件。 因為HTML5的<canvas>標籤只是定義一個透明的繪圖區域，如同一張指定尺寸的畫布，我們需要使用JavaScript或jQuery程式碼才能在此畫布上繪圖。

15-3-1 使用JavaScript在Canvas元素繪圖- 座標系統 電腦螢幕的座標系統是使用「像素」（Pixels）為單位，Canvas畫布是一個長方形區域，左上角為原點，其座標是(0, 0)，X軸從左到右，Y軸由上到下，如下圖所示：

15-3-1 使用JavaScript在Canvas元素繪圖- <canvas>標籤 HTML5提供<canvas>標籤可以建立可繪圖的長方形區域，讓我們使用JavaScript程式碼直接在網頁上繪圖或載入圖片。在<canvas>標籤一定要指定id屬性，以便JavaScript程式碼可以取得DOM物件，如下所示： <canvas id="myCanvas" width="200" height="150"></canvas> 標籤碼建立id屬性值為myCanvas的HTMLCanvasElement物件。

15-3-1 使用JavaScript在Canvas元素繪圖- 建立Canvas畫布 在JavaScript程式建立Canvas畫布，在取得id屬性值為myCanvas的HTMLCanvasElement物件後，呼叫getContext()方法取得實際的繪圖物件，如下所示： var myCanvas = document.getElementById("myCanvas"); var myContext = myCanvas.getContext("2d"); 上述方法參數是"2d"，可以傳回產生的CanvasRenderingContext2D物件，這就是在Canvas畫布上建立的繪圖環境，例如：替畫布填滿背景色彩，如下所示： myContext.fillStyle = "yellow"; myContext.fillRect(0, 0, myCanvas.width, myCanvas.height); 程式碼的fillStyle屬性可以指定填滿樣式為黃色，然後呼叫fillRect()方法填滿長方形的背景色彩，即黃色的長方形背景。

15-3-1 使用JavaScript在Canvas元素繪圖- 範例 在ASP.NET程式建立<canvas>標籤，然後使用JavaScript程式碼填滿此繪圖區域，如右圖所示：

15-3-2 繪出長方形-相關方法 CanvasRenderingContext2D物件可以使用strokeRect()和fillRect() 方法繪出長方形或填滿長方形，相關方法說明如下表所示： 方法 說明 strokeRect(x, y, w, h) 使用strokeStyle屬性的樣式繪出一個長方形，(x, y)是左上角座標，w是長方形尺寸的寬；h是長方形的高 fillRect(x, y, w, h) 使用fillStyle屬性的樣式繪出一個填滿的長方形，參數和strokeRect()方法相同 clearRect(x, y, w, h) 清除長方形區域的內容，參數和strokeRect()方法相同

15-3-2 繪出長方形-程式碼 在JavaScript程式碼只需指定fillStyle屬性的填滿色彩，就可以使用fillRect()方法繪出長方形，如下所示： myContext.fillStyle = "red"; myContext.fillRect(10, 10, 50, 50); 程式碼是繪出正方形，因為尺寸的寬和高相同都是50。同理，繪出沒有填滿的長方形是使用strokeStyle屬性和strokeRect()方法，如下所示： myContext.strokeStyle = "blue"; myContext.strokeRect(50, 80, 80, 40);

15-3-2 繪出長方形-範例 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼繪出填滿的紅色正方形和一個長方形，如右圖所示：

15-3-3 繪出直線與多邊形-繪出直線 在Canvas畫布繪出直線，首先呼叫moveTo()方法移至開始的起點（下筆點），然後從此起點開始，呼叫lineTo()方法繪出至參數座標的直線（繪至目的點），如下所示： myContext.moveTo(0,0); myContext.lineTo(50,50); myContext.lineTo(100,0); myContext.lineTo(150,50); myContext.lineTo(200,0); myContext.stroke(); 程式碼建立5個端點之間的路徑，最後呼叫stroke()方法以strokeStyle屬性的樣式繪出5個端點之間的4條直線。

15-3-3 繪出直線與多邊形-繪出多邊形 如果我們建立的路徑最後回到起點，就可以繪出形狀，例如：多邊形，因為是在同一張畫布繪出直線和多個形狀，所以需要使用beginPath()方法表示建立一個新路徑，如下所示： myContext.beginPath(); myContext.moveTo(100, 50); myContext.lineTo(50, 75); myContext.lineTo(100, 100); myContext.lineTo(150, 75); myContext.closePath(); myContext.fill(); 程式碼建立菱形路徑，closePath()方法可以將最後一個端點連接至起點來圍成形狀，最後呼叫fill()方法填滿形狀。

15-3-3 繪出直線與多邊形-範例 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼繪出4條藍色直線、一個紅色菱形和填滿的綠色菱形，如右圖所示：

15-3-4 繪出圓形-相關方法 在Canvas畫布繪出圓形或填滿圓形是使用arc()配合stroke()和fill()方法，如下所示： myContext.beginPath(); myContext.arc(100,100,30,0,Math.PI*2,true); myContext.closePath(); myContext.stroke(); 程式碼使用arc()方法繪出圓形，圓心座標是(100, 100)，半徑30，弧度是0~Math.PI*2即一整圈，所以stroke()方法繪出的弧形是一個圓形，如果使用fill()方法就是填滿圓形。

15-3-4 繪出圓形-範例 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼分別繪出重疊的一個圓形和填滿圓形，如右圖所示：

15-3-5 顯示圖片-drawImage()方法 在Canvas畫布可以顯示圖片檔案，這是使用Image()建構函數建立Image物件後，呼叫drawImage()方法來顯示圖片，如下所示： var img = new Image(); img.onload = function() { myContext.drawImage(this, 0, 0, 200, 150); } img.src = "Flower.jpg"; 程式碼建立Image物件img後，註冊onload事件處理函數，當圖片載入後就顯示圖片內容，即呼叫drawImage()方法，最後src屬性值是圖片檔案的URL網址。

15-3-5 顯示圖片-範例 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼在畫布顯示Flower.jpg圖片檔案，如右圖所示：

15-3-6 繪出文字內容-相關方法 在Canvas畫布繪出文字內容是使用fillText()或strokeText()方法，在呼叫之前，我們需要指定文字對齊和字型的相關樣式，如下所示： myContext.font = "italic 20px 細明體"; myContext.textBaseline = "top"; myContext.textAlign = "center"; 程式碼指定字型尺寸、字體、樣式和對齊方式後，就可以繪出文字內容，如下所示： myContext.fillStyle = "red"; myContext.fillText("ASP.NET程式設計", 100, 10); 程式碼呼叫fillText()方法，使用fillStyle屬性的樣式，在座標(100, 10)繪出第1個參數的字串內容，同理，strokeText()方法是使用strokeStyle屬性的樣式。

15-3-6 繪出文字內容-範例 在ASP.NET程式建立<canvas>標籤後，使用JavaScript程式碼在Canvas畫布顯示2行文字內容，如右圖所示：

15-4 HTML5的客戶端儲存體-種類 HTML5支援客戶端儲存體（Client-side Storage）功能，可以讓我們在客戶端儲存鍵值成對的資料。HTML5版的客戶端儲存體主要分成兩種，其主要差異是資料保存期限的不同，如下所示： localStorage：localStorage的資料保存期限比較長，原則上它需要等到Javascript程式碼刪除，或使用者自行清空快取才會消失。 sessionStorage：sessionStorage的資料在關閉瀏覽器視窗或標籤頁就會刪除。

15-4 HTML5的客戶端儲存體-方法 localStorage和sessionStorage物件使用相同API來新增、取得和刪除儲存的資料，其說明如下表所示： 方法 說明 setItem(key, value) 新增儲存資料，參數key是鍵；value是值 getItem(key) 取出參數key鍵的儲存值，傳回的是setItem()方法的value參數值 removeItem(key) 刪除參數key鍵的儲存資料

15-4 HTML5的客戶端儲存體-程式碼 使用localStorage儲存訪客的姓名資料，如下所示： localStorage.setItem("name", "陳會安"); 程式碼建立鍵值為name的資料。取出localStorage物件儲存的資料有兩種方式，如下所示： alert("姓名: " + localStorage.getItem("name")); alert("Hello " + localStorage.name); 程式碼分別使用getItem()方法和屬性來取出儲存的資料。刪除資料是使用removeItem()方法，如下所示： localStorage.removeItem("name");

15-4 HTML5的客戶端儲存體-範例 在ASP.NET程式使用localStorage儲存訪客的姓名資料，如右圖所示：

15-5 HTML5的定位服務-取得定位資料 HTML5提供Geolocation API幫助我們存取行動裝置目前GPS的定位資料，包含：緯度（Latitude）和經度（Longitude）等資料。 在JavaScript程式碼是使用navigator物件的geolocation屬性取得Geolocation物件，然後呼叫getCurrentPosition()方法取得定位資料，如下所示： navigator.geolocation.getCurrentPosition( successCallback, errorCallback);

15-5 HTML5的定位服務- 成功呼叫的回撥函數 成功呼叫的回撥函數，如下所示： function successCallback(pos) { $('#result').html("緯度: " + pos.coords.latitude + "<br/>經度: " + pos.coords.longitude); } 函數可以使用參數取得Coordinates物件，此物件的屬性是位置資料的緯度和經度。

15-5 HTML5的定位服務- 失敗呼叫的回撥函數 function errorCallback(error) { switch(error.code) { case 1: alert("錯誤! 應用程式沒有權限使用定位服務!"); break; case 2: alert("錯誤! 在取得位址資料時發生錯誤!"); case 3: alert("錯誤! 超過等待時間..."); default: alert("不明錯誤!"); }

15-5 HTML5的定位服務-範例 在ASP.NET程式使用Geolocation API取得行動裝置目前GPS的定位資料，如右圖所示：

15-6 HTML5的離線應用程式-說明 HTML5的應用程式快取（Application Cache）可以讓我們建立離線應用程式（Offline Application），將Web網站或應用程式儲存在客戶端的應用程式快取，換句話說，就算行動裝置沒有Internet連線或斷線時，我們一樣可以瀏覽Web網站或執行應用程式。 雖然，傳統瀏覽器快取也提供離線功能，不過並不可靠，因為它是保留網頁，並不包含此網頁所有相關資源檔案，主要是因為根本不知道有哪些相關資源檔案需要保留，而且，瀏覽器快取只會保留一段時間，並不保證下次瀏覽時，它仍然存在。

HTML5的應用程式快取可以提供Web網站或應用程式三大好處，如下所示： 離線瀏覽：使用者可以在離線時，依然使用應用程式。 快速：因為檔案是保留在快取，所以載入資源檔案將無比迅速。 減少伺服器的負擔：瀏覽器只需下載更新的資源檔案，可以大幅降低伺服器的負擔。

15-6 HTML5的離線應用程式-Manifest檔案 Manifest檔案是一個副檔名為.manifest的文字檔案，其內容是告訴瀏覽器需要快取哪些資源檔案；不快取哪些資源檔案，和如何替代不存在的資源，如下所示： CACHE MANIFEST # 2012-12-21 Version 1.0.0 /index.html /cache.html /styles/main.css /img/logo.gif /scripts/main.js NETWORK: /login.cshtml FALLBACK: / offline.html

15-6 HTML5的離線應用程式- Manifest檔案說明 CACHE MANIFEST：在此區段詳細列出需要快取的檔案清單，包含HTML網頁、圖片、CSS樣式檔和JavaScript程式檔。當瀏覽器載入Manifest檔案後，瀏覽器就會從網站下載此區段的檔案清單，也就是說，當沒有Internet連線時，這些資源依然可以順利瀏覽。 NETWORK：此區段是需要Internet連線的資源，所以不會儲存在快取，例如：伺服端網頁技術的程式檔案，在離線時，此區段的資源將無法瀏覽，如果使用「*」號，表示所有其他資源檔案都需要Internet連線。 FALLBACK：此區段列出如果無法存取指定資源檔案時的替代資源檔案，即在離線時，請求沒有儲存在應用程式快取的資源檔案的替代選擇，例如：請求NETWORK區段的login.cshtml檔案，就是替代載入offline.html，空格之前的「/」符號表示根目錄下的所有檔案，我們也可以指明其他目錄或檔案。

15-6 HTML5的離線應用程式- 在HTML5網頁使用應用程式快取 我們需要在HTML5網頁啟用應用程式快取，也就是在<html>標籤加上manifest屬性，如下所示： <!DOCTYPE HTML> <html manifest="offline.manifest"> ... </html> <html>標籤有manifest屬性的Manifest檔案名稱，每一擁有此屬性的網頁，當使用者請求此網頁時，就會下載至應用程式快取，沒有此屬性的網頁並不會下載至快取，除非網頁列名在Manifest檔案的CACHE MANIFEST區段。