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

時間  2019-11-19
標籤 html5 html 系列 多媒體 播放 本地 存儲 數據庫 離線 應用 欄目 HTML5 简体版
原文   原文鏈接

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

audio和video元素的屬性介紹

一、src：媒體數據的URL地址javascript

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

 

二、autoplay:是否自動播放html

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

 

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

四、poster:當視頻不可用時，向用戶展現一幅能夠替代的圖片java

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

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

 

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

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

 

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

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

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

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

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

十二、seeking(只讀屬性)：若是瀏覽器正在請求數據，則爲true 若是返回false則表示瀏覽器已中止請求

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

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

1五、startTime(只讀屬性)：讀取媒體播放的開始時間，一般爲0

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

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

1八、volume:播放音量（0爲靜音 1爲最大音量）

1九、muted：若是該值爲true則表示處於靜音狀態，false爲非靜音狀態

audio和video元素的方法介紹

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

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

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

四、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查詢同樣的查詢語句來操做本地數據庫。

核心方法：

一、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_*
二、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));
                    }
                });
            })

三、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>
View Code

運行效果圖以下所示：（你們能夠試一下，其實用起來仍是挺有趣的）

離線應用

離線應用應該是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;
};
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程