如何使用html5？

1、video src="hangge.mp4" controls/video1

成都創新互聯是少有的成都做網站、成都網站制作、營銷型企業網站、重慶小程序開發公司、手機APP,開發、制作、設計、買友情鏈接、推廣優化一站式服務網絡公司,成立與2013年,堅持透明化,價格低,無套路經營理念。讓網頁驚喜每一位訪客多年來深受用戶好評

2，通過width和height設置視頻窗口大小

video src="hangge.mp4" controls width="400" height="300"/video1

3，預加載媒體文件

設置preload不同的屬性值，可以告訴瀏覽器應該怎樣加載一個媒體文件：

（1）值為auto：讓瀏覽器自動下載整個文件

（2）值為none：讓瀏覽器不必預先下載文件

（3）值為metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以確定一些基本信息（比如視頻的總時長，第一幀圖像等）

!-- 用戶點擊播放才開始下載 --video src="hangge.mp4" controls preload="none"/video12

4，自動播放

（1）使用autoplay屬性可以讓瀏覽器加載完視頻文件后立即播放。

video src="hangge.mp4" controls autoplay/video1

（2）如果啟用自動播放，可以將播放器設置為muted狀態。這樣自動播放時會靜音，防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。

video src="hangge.mp4" controls autoplay muted/video1

5，循環播放

使用loop屬性讓視頻播放結束時，再從頭開始播放。

video src="hangge.mp4" controls loop/video1

6，設置替換視頻的圖片（封面圖片）

通過poster屬性可以設置，瀏覽器在下面三種情況下會使用這個圖片：

（1）視頻第一幀未加載完畢

（2）把preload屬性設置為none

（3）沒有找到指定的視頻文件

video src="hangge.mp4" controls poster="hangge.png"/video1

7，瀏覽器兼容，如何讓每一個瀏覽器都能順利播放視頻

現在大部分瀏覽器都能支持H.264格式的視頻，但Opera瀏覽器卻一直不支持。我們需要通過后備措施保證每個人都能看到視頻，通常有下面幾種方案：

（1）使用多種視頻格式

video和audio元素有個內置的格式后備系統。我們不使用src屬性，而是在其內部嵌套一組source元素，瀏覽器會選擇播放第一個它所支持的文件。

我們可以添加WebM格式的視頻提供對Opera的支持。

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video1234

（2）添加Flash后備措施（推薦）

上面那個方法不推薦，應為Opera瀏覽器只占不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的，同時Flash還能兼容IE8這種連video元素都不支持的老瀏覽器。

這里使用Flowplayer Flash作為備用播放器（本地下載 ：flowplayer-3.2.18.zip）

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

/object

/video1234567891011

（3）也有人優先使用Flash，而HTML5作為后備措施。

這么做是因為Flash普及率比較高，而HTML5作為后備可以擴展iPad和iPhone用戶

object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video

/object

使用 html5 怎么開發一個動態網站？

使用 html5 開發一個動態網站方法：

工具/原料

HBuilder6.6

MUI2.5

方法/步驟

為了演示HTML5 APP頁面是如何做到動態調整布局。

1、首先，我們創建一個移動APP項目，然后，添加一個index.html頁面。代碼里，添加一個圖標，以及添加引入一個JS文件，該文件的作用在于：請求后臺JS文件。

2、接下來，我們看看service.js文件是如何請求后臺JS文件的。編寫該service.js文件的重點是：A、如何異步請求后臺JS文件；B、請求回來的后臺文件，如何動態添加到頁面的Head里。

3、緊接著，我們對APP項目進行打包操作：選擇需要的打包類型，然后，填寫相應的證書信息。如果選擇IOS打包，請在打包證書里，添加需要安裝的蘋果手機UDID（未提供UDID，則不能安裝APP)。

4、打包完成后，便可以下載安裝APP。先用蘋果手機連接電腦，然后通過工具安裝APP。當然，這種連接數據線安裝的方式，只能適合個人測試使用。如果想給別人批量安裝測試，請參考《HTML5 APP開發之APP測試》經驗。

1HTML5 APP開發之APP測試

5、APP安裝完成后，我們看看打開APP現有的效果是怎樣的。我們看到APP頁面的左上角，顯示了一個聯系人的圖標。

6、由于菜果手機不同系列的屏幕大小不一樣，而且屏幕的分辨率也不一樣【安桌手機的也一樣】。導致同一個頁面布局，在不同的手機上，顯示的位置有時偏差比較大，有時也好。當然，這也加大了開發和測試的難度。不可能因一些位置問題，就重新發布APP。下面是蘋果手機不同系列的屏幕大小分辨率說明：

7、所以，才有了動態調試頁面布局的想法。回到第二步，我們是有請求后臺JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何編寫的：A、首先判斷手機操作系統類型；B、判斷屏幕大小。

8、添加了showJSPage.js代碼后，啟動后臺服務。然后，關閉原來打開的APP軟件，再重新打開APP軟件，便可查看修改后的效果。

9、整個方案的理解重點在于：熟悉JS執行的先后順序，以及對手機屏幕大小與屏幕分辨率的關系。才能靈活運用，達到自己想要的目的。

html5 本地存儲有多少種方案

html5 本地存儲有五種方案。

1、LocalStorage

LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：

function save(dataModel){

var value = dataModel.serialize();

window.localStorage['DataModel'] = value;

window.localStorage['DataCount'] = dataModel.size();

console.log(dataModel.size() + ' datas are saved');

return value;

}

function restore(dataModel){

var value = window.localStorage['DataModel'];

if(value){

dataModel.deserialize(value);

console.log(window.localStorage['DataCount'] + ' datas are restored');

return value;

}

return '';

}

function clear(){

if(window.localStorage['DataModel']){

console.log(window.localStorage['DataCount'] + ' datas are cleared');

delete window.localStorage['DataModel'];

delete window.localStorage['DataCount'];

}

}

2、Cookie

這種存儲方式存儲內容很有限，只適合做簡單信息存儲，存取接口設計得極其反人類，舉例如下：

function getCookieValue(name) {

if (document.cookie.length 0) {

var start = document.cookie.indexOf(name + "=");

if (start !== -1) {

start = start + name.length + 1;

var end = document.cookie.indexOf(";", start);

if (end === -1){

end = document.cookie.length;

}

return unescape(document.cookie.substring(start, end));

}

}

return '';

}

function save(dataModel) {

var value = dataModel.serialize();

document.cookie = 'DataModel=' + escape(value);

document.cookie = 'DataCount=' + dataModel.size();

console.log(dataModel.size() + ' datas are saved');

return value;

}

3、Indexed Database API

IndexedDB可以存儲結構對象，可構建key和index的索引方式查找，目前各瀏覽器的已經逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作接口類似NodeJS的異步回調方式，特別是查詢時連cursor的continue都是異步再次回調onsuccess函數的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。

function save(dataModel){

var tx = db.transaction("meters", "readwrite");

var store = tx.objectStore("meters");

dataModel.each(function(data){

store.put({

id: data.getId(),

tag: data.getTag(),

name: data.getName(),

meterValue: data.a('meter.value'),

meterAngle: data.a('meter.angle'),

p3: data.p3(),

r3: data.r3(),

s3: data.s3()

});

});

tx.oncomplete = function() {

console.log(dataModel.size() + ' datas are saved');

};

return dataModel.serialize();

}

4、FileSystem API

FileSystem API相當于操作本地文件的存儲方式，目前支持瀏覽器不多，其接口標準也在發展制定變化中，因此也可以動態生成圖片到本地文件，然后通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。

function save(dataModel) {

var value = dataModel.serialize();

fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {

console.log(fileEntry.toURL());

fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function () {

console.log(dataModel.size() + ' datas are saved');

};

var blob = new Blob([value], {type: 'text/plain'});

fileWriter.write(blob);

});

});

return value;

}

5、Application Cache

window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 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;

};

HTML5是什么？具體是干什么的？

HTML的全稱是超文本標記語言，是一種標記語言。它包括一系列標簽，可以統一網絡上文檔的格式，將分散的互聯網資源連接成一個邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動畫、聲音、表格、鏈接等。Html是一種用來描述網頁的語言。它被稱為超文本標記語言，它是一種標記語言。它包括一系列標簽，可以統一網絡上文檔的格式，將分散的互聯網資源連接成一個邏輯整體。

標題名稱：html5方案,Html5標準
文章位置：http://vcdvsql.cn/article42/dsdeeec.html

成都網站建設公司_創新互聯，為您提供服務器托管、網站排名、網站營銷、網站導航、網頁設計公司、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯