如何使用html5？

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

成都創(chuàng)新互聯(lián)是少有的成都做網(wǎng)站、成都網(wǎng)站制作、營(yíng)銷型企業(yè)網(wǎng)站、重慶小程序開(kāi)發(fā)公司、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、買(mǎi)友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,成立與2013年,堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶好評(píng)

2，通過(guò)width和height設(shè)置視頻窗口大小

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

3，預(yù)加載媒體文件

設(shè)置preload不同的屬性值，可以告訴瀏覽器應(yīng)該怎樣加載一個(gè)媒體文件：

（1）值為auto：讓瀏覽器自動(dòng)下載整個(gè)文件

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

（3）值為metadata：讓瀏覽器先獲取視頻文件開(kāi)頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時(shí)長(zhǎng)，第一幀圖像等）

!-- 用戶點(diǎn)擊播放才開(kāi)始下載 --video src="hangge.mp4" controls preload="none"/video12

4，自動(dòng)播放

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

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

（2）如果啟用自動(dòng)播放，可以將播放器設(shè)置為muted狀態(tài)。這樣自動(dòng)播放時(shí)會(huì)靜音，防止用戶厭煩。用戶需要的話可以點(diǎn)擊播放器揚(yáng)聲器圖標(biāo)重新打開(kāi)聲音。

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

5，循環(huán)播放

使用loop屬性讓視頻播放結(jié)束時(shí)，再?gòu)念^開(kāi)始播放。

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

6，設(shè)置替換視頻的圖片（封面圖片）

通過(guò)poster屬性可以設(shè)置，瀏覽器在下面三種情況下會(huì)使用這個(gè)圖片：

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

（2）把preload屬性設(shè)置為none

（3）沒(méi)有找到指定的視頻文件

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

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

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

（1）使用多種視頻格式

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

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

video controls

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

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

/video1234

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

上面那個(gè)方法不推薦，應(yīng)為Opera瀏覽器只占不到1%的份額。特意為它把視頻都轉(zhuǎn)碼一邊太費(fèi)事。使用Flash作為備用播放方案還是很方便的，同時(shí)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）也有人優(yōu)先使用Flash，而HTML5作為后備措施。

這么做是因?yàn)镕lash普及率比較高，而HTML5作為后備可以擴(kuò)展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 怎么開(kāi)發(fā)一個(gè)動(dòng)態(tài)網(wǎng)站？

使用 html5 開(kāi)發(fā)一個(gè)動(dòng)態(tài)網(wǎng)站方法：

工具/原料

HBuilder6.6

MUI2.5

方法/步驟

為了演示HTML5 APP頁(yè)面是如何做到動(dòng)態(tài)調(diào)整布局。

1、首先，我們創(chuàng)建一個(gè)移動(dòng)APP項(xiàng)目，然后，添加一個(gè)index.html頁(yè)面。代碼里，添加一個(gè)圖標(biāo)，以及添加引入一個(gè)JS文件，該文件的作用在于：請(qǐng)求后臺(tái)JS文件。

2、接下來(lái)，我們看看service.js文件是如何請(qǐng)求后臺(tái)JS文件的。編寫(xiě)該service.js文件的重點(diǎn)是：A、如何異步請(qǐng)求后臺(tái)JS文件；B、請(qǐng)求回來(lái)的后臺(tái)文件，如何動(dòng)態(tài)添加到頁(yè)面的Head里。

3、緊接著，我們對(duì)APP項(xiàng)目進(jìn)行打包操作：選擇需要的打包類型，然后，填寫(xiě)相應(yīng)的證書(shū)信息。如果選擇IOS打包，請(qǐng)?jiān)诖虬C書(shū)里，添加需要安裝的蘋(píng)果手機(jī)UDID（未提供UDID，則不能安裝APP)。

4、打包完成后，便可以下載安裝APP。先用蘋(píng)果手機(jī)連接電腦，然后通過(guò)工具安裝APP。當(dāng)然，這種連接數(shù)據(jù)線安裝的方式，只能適合個(gè)人測(cè)試使用。如果想給別人批量安裝測(cè)試，請(qǐng)參考《HTML5 APP開(kāi)發(fā)之APP測(cè)試》經(jīng)驗(yàn)。

1HTML5 APP開(kāi)發(fā)之APP測(cè)試

5、APP安裝完成后，我們看看打開(kāi)APP現(xiàn)有的效果是怎樣的。我們看到APP頁(yè)面的左上角，顯示了一個(gè)聯(lián)系人的圖標(biāo)。

6、由于菜果手機(jī)不同系列的屏幕大小不一樣，而且屏幕的分辨率也不一樣【安桌手機(jī)的也一樣】。導(dǎo)致同一個(gè)頁(yè)面布局，在不同的手機(jī)上，顯示的位置有時(shí)偏差比較大，有時(shí)也好。當(dāng)然，這也加大了開(kāi)發(fā)和測(cè)試的難度。不可能因一些位置問(wèn)題，就重新發(fā)布APP。下面是蘋(píng)果手機(jī)不同系列的屏幕大小分辨率說(shuō)明：

7、所以，才有了動(dòng)態(tài)調(diào)試頁(yè)面布局的想法。回到第二步，我們是有請(qǐng)求后臺(tái)JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何編寫(xiě)的：A、首先判斷手機(jī)操作系統(tǒng)類型；B、判斷屏幕大小。

8、添加了showJSPage.js代碼后，啟動(dòng)后臺(tái)服務(wù)。然后，關(guān)閉原來(lái)打開(kāi)的APP軟件，再重新打開(kāi)APP軟件，便可查看修改后的效果。

9、整個(gè)方案的理解重點(diǎn)在于：熟悉JS執(zhí)行的先后順序，以及對(duì)手機(jī)屏幕大小與屏幕分辨率的關(guān)系。才能靈活運(yùn)用，達(dá)到自己想要的目的。

html5 本地存儲(chǔ)有多少種方案

html5 本地存儲(chǔ)有五種方案。

1、LocalStorage

LocalStorage就是Key-Value的簡(jiǎn)單鍵值對(duì)存儲(chǔ)結(jié)構(gòu)，Web Storage除了localStorage的持久性存儲(chǔ)外，還有針對(duì)本次回話的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

這種存儲(chǔ)方式存儲(chǔ)內(nèi)容很有限，只適合做簡(jiǎn)單信息存儲(chǔ)，存取接口設(shè)計(jì)得極其反人類，舉例如下：

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可以存儲(chǔ)結(jié)構(gòu)對(duì)象，可構(gòu)建key和index的索引方式查找，目前各瀏覽器的已經(jīng)逐漸支持IndexedDB的存儲(chǔ)方式，其使用代碼如下，需注意IndexedDB的很多操作接口類似NodeJS的異步回調(diào)方式，特別是查詢時(shí)連cursor的continue都是異步再次回調(diào)onsuccess函數(shù)的操作方式，因此和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相當(dāng)于操作本地文件的存儲(chǔ)方式，目前支持瀏覽器不多，其接口標(biāo)準(zhǔn)也在發(fā)展制定變化中，因此也可以動(dòng)態(tài)生成圖片到本地文件，然后通過(guò) filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問(wèn)。

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 對(duì)象是對(duì)瀏覽器的應(yīng)用緩存的編程訪問(wèn)方式。其 status 屬性可用于查看緩存的當(dāng)前狀態(tài)：

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的全稱是超文本標(biāo)記語(yǔ)言，是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。Html是一種用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言。它被稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。

標(biāo)題名稱：html5方案,Html5標(biāo)準(zhǔn)
文章位置：http://chinadenli.net/article42/dsdeeec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站排名、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)