目錄
1. HTML5 Media-Video
2. HTML5 Media-Audio
3. 拖拽操作
4. 擷取位置資訊
5. 使用Google 地圖擷取位置資訊
多媒體是網際網路中的最重要的一部分，無論通路的是哪種類型的網頁，視訊或音頻觸手可及，在之前實作這些功能對開發人員來說可能非常痛苦，必須依賴Object 标簽，調用第三方軟體來加載，如Flash等，如果有些裝置不支援Flash，我們對此就束手無策了。但是HTML5的出現讓多媒體網頁開發變得異常簡單，也形成了新的标準。
在本節中學習如何在HTML5中使用Video 元素
1.準備視訊資源
2. 建立HTML 頁面
建立HTML ，并命名為“Media.html”,輸入以下内容：
1. 建立HTML 頁面
建立HTML 頁面“Media01.html”設定Video 資源 src屬性。在本節中不使用Controls 屬性來設定，使用JS代碼來實作。
2. 添加播放，暫停，和聲音調節按鈕。
3. 建立JS 函數來控制Video播放。
輸出：
HTML5使得在頁面中加載音頻元素變得非常簡單。
1. 準備音頻資源
2. 建立HTML頁面，輸入以下内容：
3. 輸出：
1.建立HTML頁面
2. 添加播放，暫停及音量鍵
3. 建立JS 函數來控制音頻播放。代碼如下：
在之前，實作拖拽操作都是開發人員自定義邏輯來實作，但是HTML5提供了拖拽API ，使得拖拽操作的實作變得如此簡單。
1. 準備資源（圖檔資源）
2. 設定draggable 屬性
3. 輸出
4. 實作drag 事件
5. drog 操作
當拖拽的元素被滑鼠釋放時，自動調用ondrop 事件
建立HTML頁面，HTML & Css 代碼如下：
JS 代碼：
運作：
7. 地理位置資訊的擷取
HTML5 可以共享位置資訊，精度和次元都可以通過JS事件來捕捉并傳回給伺服器來在google 地圖中定位。
初始化：
1. 建立html 頁面 Geolocation.html;
2. 添加頁面元素：
執行：
如何實作自定更新位置資訊呢？
1. 初始化
2. JS代碼
持續更新位置資訊
JS代碼：
2. 添加GOOGLE 地圖的引用
3. 添加div 元素，并加載地圖