HTML5系列三（多媒體播放、本地存儲、本地數據庫、離線應用）

各瀏覽器對編碼格式的支持情況

audio和video元素的屬性介紹

1、src：媒體數據的URL地址

<video src="pr6.mp4"></video>

<video src="pr6.mp4" width="320" height="240"></video>

 

2、autoplay:是否自動播放

<video src="pr6.mp4" autoplay></video> 

 

3、preload：是否預加載（有三個可選擇的值）

4、poster:當視頻不可用時，向用戶展示一幅可以替代的圖片

5、loop:是否循環播放視頻或音頻

<video src="pr6.mp4" preload loop></video>

 

6、controls:是否為視頻或音頻添加瀏覽器自帶的播放用的控制條

<video src="pr6.mp4" controls></video>

 

7、error（只讀屬性）:在正常情況下error屬性為null，在發生錯誤的情況下error屬性將返回一個MediaError對象，該對象的code返回對應的錯誤狀態，如下圖所示：

8、networkState（只讀屬性）：在媒體數據加載過程中可以使用video元素或audio元素的networkState屬性讀取當前網絡狀態

9、currentSrc(只讀屬性)：播放中的媒體數據的URL地址

10、buffered(只讀屬性)：利用該屬性返回一個對象，該對象實現TimeRange接口

11、readyState(只讀屬性)：返回媒體當前播放位置的就緒狀態

12、seeking(只讀屬性)：如果瀏覽器正在請求數據，則為true 如果返回false則表示瀏覽器已停止請求

13、seekable(只讀屬性)：返回一個TimeRanges對象，該對象表示請求到的數據的時間范圍

14、currentTime：用來修改當前播放位置

15、startTime(只讀屬性)：讀取媒體播放的開始時間，通常為0

16、duration(只讀屬性)：媒體文件總的播放時間

17、defaultPlaybackRate、playbackRate：用於讀取或修改媒體默認的播放速率和當前播放速率

18、volume:播放音量（0為靜音 1為最大音量）

19、muted：如果該值為true則表示處於靜音狀態，false為非靜音狀態

audio和video元素的方法介紹

1、play:播放媒體，自動將元素折paused屬性值變為false

2、pause：暫停播放，自動將元素折paused屬性值變為true

3、load:重新載入媒體進行播放，自動將元素的playbackRate屬性值變為defaultPlaybackRate，自動將元素的error屬性的值變為null

4、canPlayType：測試瀏覽器是否支持指定的媒體類型，該方法返回的值如下圖所示

audio和video元素的事件介紹

Web Storage

cookie儲存永久數據存在以下幾個問題：

說說歷史吧

大家都知道現在本地存儲都已經應用非常廣泛了，主要是因為各大瀏覽器都很好的支持了html5的這一特性

web storage分為兩種：

1)sessionStorage：（臨時保存）將數據保存在session對象中，也就是用戶瀏覽器網站的這段時間內保存的數據

2)localStorage:（永久保存）保存在客戶端本地的硬件設備中，即使瀏覽器被關閉，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用（有一點需要注意的是，雖然數據是保存在客戶端本地，但是如果說先使用a瀏覽器進行數據緩存的，如果用b瀏覽器來讀取緩存下來的數據是訪問不到的）

使用方法：

1）sessionStorage

2)localStorage

事實上還可以用如下的方式進行保存和修改

var storage = window.localStorage;   //獲得本地存儲對象
storage["author"] = "angela";         //設置
var b = storage["author"]          //獲取

 

需要注意點：

1）保存時不允許重要保存相同的鍵名

2）保存后可以修改鍵值，但不允許修改鍵名 

3）Local Storage只能存儲字符串，任何值都會轉成字符串的方式進行存儲（這個時候就不免會使用JSON.stringify() 和 JSON.parse()這倆工具函數了）

4）storage事件最大的作用是跨頁面監聽

使用chrome控制台查看

本地存儲事件監聽：

storage事件可以很方便的監聽本地存儲是否改變（增、刪）

window.addEventListener("storage",handle_storage,false);
window.attachEvent("onstorage",handle_storage);
function handle_storage(e){ e = e || window.event;}

事件e對象包含4個屬性，如下表所示

 當原源頁面中的某一個頁面對Storage數據進行添加或更新處理后，其余的同源頁面只要注冊Storage事件，就會觸發事件。利用本地存在 的這個特性，可以減輕服務器的壓力及數據的可訪問性。

本地數據庫

Web SQL數據庫API實際上不是HTML5規范的組成部分，而是單獨的規范。它通過一套API來操縱客戶端的數據庫。HTML5的Web SQL Databases的確很誘惑人，可以用與sql查詢一樣的查詢語句來操作本地數據庫。

核心方法：

1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。

var db = openDatabase('MyData', '1.0', 'My Database', 102400, function () { });
if (!db) {
alert("fail！");
} else {
alert("success！");
}

openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是：
1)數據庫名稱。
2)版本號 目前為1.0,不管他，寫死就OK。
3)對數據庫的描述。
4)設置數據的大小。
5)回調函數(可省略)。

創建的數據庫就存在本地，路徑如下：C:\Users\angela\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_*
2、transaction：這個方法允許我們根據情況控制事務提交或回滾。

            db.transaction(function (tx) {                
                tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)', []);
                tx.executeSql('SELECT * FROM MsgData', [], function (tx, rs) {
                    removeAllData();
                    for (var i = 0; i < rs.rows.length; i++) {
                        showData(rs.rows.item(i));
                    }
                });
            })

3、executeSql：這個方法用於執行真實的SQL查詢。

            db.transaction(function (tx) {
                tx.executeSql('INSERT INTO MsgData VALUES (?,?,?)', [name, message, time], function () {
                    alert('success');
                }, function (tx, error) {
                    alert(error.source + ':' + error.message);
                });
            });

executeSql函數有四個參數，其意義分別是：
1）表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。（必選）
2）插入到查詢中問號所在處的字符串數據。（可選）
3）成功時執行的回調函數。返回兩個參數：tx和執行的結果。（可選）
4）一個失敗時執行的回調函數。返回兩個參數：tx和失敗的錯誤信息。（可選）

下面看一個具體的例子，代碼如下所示：

<script type="text/javascript">
    var datatable = null;
    var db = openDatabase('MyData1', '1.0', 'My Database', 102400, function () { });
    function init() {
        datatable = document.getElementById('datatable');
        showAllData();
    }
    function removeAllData() {
        for (var i = datatable.childNodes.length - 1; i > 0; i--) {
            datatable.removeChild(datatable.childNodes[i]);
        }
        var tr = document.createElement('tr');
        var th1 = document.createElement('th');
        var th2 = document.createElement('th');
        var th3 = document.createElement('th');
        th1.innerHTML = '姓名';
        th2.innerHTML = '留言';
        th3.innerHTML = '時間';
        tr.appendChild(th1);
        tr.appendChild(th2);
        tr.appendChild(th3);
        datatable.appendChild(tr);
    }
    function showData(row) {
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML = row.name;
        var td2 = document.createElement('td');
        td2.innerHTML = row.message;
        var td3 = document.createElement('td');
        var t = new Date();
        t.setTime(row.time);
        td3.innerHTML = t.toLocaleDateString() + '' + t.toLocaleTimeString();
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        datatable.appendChild(tr);
    }
    function showAllData() {
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)', []);
            tx.executeSql('SELECT * FROM MsgData', [], function (tx, rs) {
                removeAllData();
                for (var i = 0; i < rs.rows.length; i++) {
                    showData(rs.rows.item(i));
                }
            });
        })
    }
    function addData(name, message, time) {
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO MsgData VALUES (?,?,?)', [name, message, time], function () {
                alert('success');
            }, function (tx, error) {
                alert(error.source + ':' + error.message);
            });
        });
    }
    function saveData() {
        var name = document.getElementById('name').value;
        var memo = document.getElementById('memo').value;
        var time = new Date().getTime();
        addData(name, memo, time);
        showAllData();
    }
</script>
<body onload="init()">
    <table>
        <tr>
            <td>姓名：</td>
            <td>
                <input id="name" type="text" />
            </td>
        </tr>
        <tr>
            <td>留言：</td>
            <td>
                <input id="memo" type="text" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="btn" onclick='saveData();' type="button" value="保存" />
            </td>

        </tr>
    </table>
    <table id="datatable" border="1">
    </table>
    <p id="msg"></p>
</body>

運行效果圖如下所示：（大家可以試一下，其實用起來還是挺有趣的）

離線應用

離線應用應該是html5中的一個重大特色，好用而且簡單。

離線應用（Offline Applications）與本地存儲不同，“本地存儲”存儲的僅僅只是鍵值對的數據，而離線應用存儲的是整個程序

Manifest文件，在html標簽中聲明如下所示：

<!DOCTYPE HTML>
<html manifest="myManifest.manifest">
<body>
...
</body>
</html>

•Manifest文件第一行： CACHE MANIFEST

后面把資源文件分為三個部分， 分別是CACHE 、 NETWORK和FALLBACK

使用示例：

CACHE MANIFEST
# angela 2015-06-21  這里特意寫點注釋以便下次我隨意更改注釋即可讓頁面更新離線應用
NETWORK:
*
CACHE:
test.js

FALLBACK:
/ /offline.html

 

其中使用的時候需要注意以下幾點細節：

1）允許在同一個manifest文件中重復書寫同一個類別

2）如果文件開頭沒有指定類別而直接書寫資源文件的話，瀏覽器會把這些資源文件被為CACHE類型，直到看到文件中第一個被書寫出來的類別為止

3）當前應用manifest的頁面會自動被緩存起來，所以無需要manifest文件中特意指定了

使用離線應用並不難，關鍵是理解離線應用的原理，也就是理解瀏覽器與服務器交互的過程，假設我現在要訪問http://Lulingniu，引用《HTML5與CSS3權威指南》中的交互過程介紹如下：

也就是說服務器會先請求所有的資源文件並顯示，之后再處理manifest文件，根據manifest文件的設置進行本地緩存

事實上當你的頁面使用了離線緩存的話，在chrome瀏覽器控制台可以清楚的看到相應的離線文件

那接下來會有兩種情況

1）manifest文件沒有被修改（先直接使用本地緩存然后再向服務器請求manifest文件進行比較）

相應的，如果manifest文件沒有被修改，在chrome控制台將會看到類似如下界面

 

2）manifest文件被修改過了（注意的地方是：即使資源文件被修改過了，更新過后的本地緩存中的內容還不能被使用，只有重新打開這個頁面的時候才會使用更新過后的資源文件）

如果manifest文件被修改了，chrome控制台會顯示類似如下所示：

 

離線應用相關方法及何時觸發相關事件

applicationCache對象代表了本地緩存，可以用它來通知用戶本地緩存中已經被更新，也允許用戶手工更新本地緩存

1）當瀏覽器對本地緩存進行更新，裝入新的資源文件時，會觸發applicationCache對象的updateready事件，通知本地緩存已被更新

2）swapCache方法用來手工執行本地緩存的更新，當然這個方法只能在updateready事件中進行調用 ，不過需要注意的是即使調用了這個方法立刻更新了本地緩存，它們也會在重新打開頁面時才生效

下面來說說applicationCache對象的事件

1）瀏覽器發現網頁具有manifest屬性，會觸發checking事件

2）瀏覽器返回所有要求本地緩存的文件，會觸發downloading事件，然后開始下載資源文件

3）在下載資源文件的同時，會周期性的觸發progress事件

4）下載結束后會觸發cached事件

5）如果任何與本地緩存有關的處理中發生錯誤的話，會觸發error事件

6）當瀏覽器對本地緩存進行更新，裝入新的資源文件時，會觸發updateready事件，通知本地緩存已被更新

6）當重新打開頁面時，如果manifest文件沒有被更新，則會觸發noupdate事件

application.status各狀態含義如下：

var appCache = window.applicationCache;
switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};