Html5支持iPhone觸屏的腳本應(yīng)該怎么寫

Html5支持iPhone觸屏的腳本寫法是利用touch事件方法。 觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發(fā)。下面具體說明： touchstart事件：當(dāng)手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。 touchmove事件：當(dāng)手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動。 touchend事件：當(dāng)手指從屏幕上離開的時候觸發(fā)。 touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時候觸發(fā)。關(guān)于這個事件的確切出發(fā)時間，文檔中并沒有具體說明，咱們只能去猜測了。 示例代碼如下：function load (){document.addEventListener('touchstart',touch, false);document.addEventListener('touchmove',touch, false);document.addEventListener('touchend',touch, false);function touch (event){var event = event window.event;var oInp = document.getElementById("inp");switch(event.type){case "touchstart":oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;case "touchend":oInp.innerHTML = "br/Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";break;case "touchmove":event.preventDefault();oInp.innerHTML = "br/Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;}} } window.addEventListener('load',load, false);

我們提供的服務(wù)有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、盧龍ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的盧龍網(wǎng)站制作公司

如何使用html5調(diào)用iPhone的后置攝像頭

html5需要使用接口chrome30+?for?android?已經(jīng)實現(xiàn)了利用webcam，調(diào)用手機后置攝像頭，代碼如下：

!DOCTYPE?html

html?xmlns=""

head

titleHTML5?GetUserMedia?Demo/title

meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0"?/

/head

body

input?type="button"?title="開啟攝像頭"?value="開啟攝像頭"?onclick="getMedia();"?/br?/

video?height="120px"?autoplay="autoplay"/videohr?/

input?type="button"?title="拍照"?value="拍照"?onclick="getPhoto();"?/br?/

canvas?id="canvas1"?height="120px"?/canvashr?/

input?type="button"?title="視頻"?value="視頻"?onclick="getVedio();"?/br?/

canvas?id="canvas2"?height="120px"/canvas

script?type="text/javascript"

var?video?=?document.querySelector('video');

var?audio,?audioType;

var?canvas1?=?document.getElementById('canvas1');

var?context1?=?canvas1.getContext('2d');

var?canvas2?=?document.getElementById('canvas2');

var?context2?=?canvas2.getContext('2d');

navigator.getUserMedia?=?navigator.getUserMedia?||?navigator.webkitGetUserMedia?||?navigator.mozGetUserMedia?||?navigator.msGetUserMedia;

window.URL?=?window.URL?||?window.webkitURL?||?window.mozURL?||?window.msURL;

var?exArray?=?[];?//存儲設(shè)備源ID

MediaStreamTrack.getSources(function?(sourceInfos)?{

for?(var?i?=?0;?i?!=?sourceInfos.length;?++i)?{

var?sourceInfo?=?sourceInfos[i];

//這里會遍歷audio,video，所以要加以區(qū)分

if?(sourceInfo.kind?===?'video')?{

exArray.push(sourceInfo.id);

}

}

});

function?getMedia()?{

if?(navigator.getUserMedia)?{

navigator.getUserMedia({

'video':?{

'optional':?[{

'sourceId':?exArray[1]?//0為前置攝像頭，1為后置

}]

},

'audio':true

},?successFunc,?errorFunc);????//success是獲取成功的回調(diào)函數(shù)

}

else?{

alert('Native?device?media?streaming?(getUserMedia)?not?supported?in?this?browser.');

}

}

function?successFunc(stream)?{

//alert('Succeed?to?get?media!');

if?(video.mozSrcObject?!==?undefined)?{

//Firefox中，video.mozSrcObject最初為null，而不是未定義的，我們可以靠這個來檢測Firefox的支持

video.mozSrcObject?=?stream;

}

else?{

video.src?=?window.URL??window.URL.createObjectURL(stream)?||?stream;

}

//video.play();

//?音頻

audio?=?new?Audio();

audioType?=?getAudioType(audio);

if?(audioType)?{

audio.src?=?'polaroid.'?+?audioType;

audio.play();

}

}

function?errorFunc(e)?{

alert('Error！'+e);

}

//?將視頻幀繪制到Canvas對象上,Canvas每60ms切換幀，形成肉眼視頻效果

function?drawVideoAtCanvas(video,context)?{

window.setInterval(function?()?{

context.drawImage(video,?0,?0,90,120);

},?60);

}

//獲取音頻格式

function?getAudioType(element)?{

if?(element.canPlayType)?{

if?(element.canPlayType('audio/mp4;?codecs="mp4a.40.5"')?!==?'')?{

return?('aac');

}?else?if?(element.canPlayType('audio/ogg;?codecs="vorbis"')?!==?'')?{

return?("ogg");

}

}

return?false;

}

//?vedio播放時觸發(fā)，繪制vedio幀圖像到canvas

//????????video.addEventListener('play',?function?()?{

//????????????drawVideoAtCanvas(video,?context2);

//????????},?false);

//拍照

function?getPhoto()?{

context1.drawImage(video,?0,?0,90,120);?//將video對象內(nèi)指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，實現(xiàn)拍照。

}

//視頻

function?getVedio()?{

drawVideoAtCanvas(video,?context2);

}

/script

/body

/html

HTML5?The?Media?Capture?API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。但實際上用html5調(diào)用手機攝像頭存在很多問題：

1）谷歌的發(fā)布的Chrome到了21版本后，才新增了一個用于高質(zhì)量視頻音頻通訊的getUserMedia?API，該API允許Web應(yīng)用程序訪問攝像頭和麥克風(fēng),其他手機瀏覽器只有opera支持html5調(diào)用本地拍照功能

2）兩個瀏覽器均不支持訪問多個攝像頭：chrome不支持訪問后置攝像頭，pera支持訪問后置攝像頭的

html5開發(fā)的頁面怎么在iphone上調(diào)適

用iphone調(diào)試html5頁面的方法如下：

1、打開手機web檢查器。

通過【設(shè)置】【Safari】【高級】【W(wǎng)eb檢查器】打開。見下圖（點擊查看大圖），并且你會看到該選項下面對電腦操作的相應(yīng)描述，照做就好。

2. 連接電腦（Mac）

1）先在手機Safari中打開你想調(diào)試的網(wǎng)頁，并用數(shù)據(jù)線連接到電腦

2）再在電腦上打開Safari點擊【Develop】菜單，就會看到如下圖所示（點擊查看大圖）：

3）點擊2中的網(wǎng)站名就會在電腦上打開Safari的控制臺，如下圖（點擊查看大圖）：

此時可以查看手機網(wǎng)頁的DOM結(jié)構(gòu)，并且和電腦端網(wǎng)頁調(diào)試無異，當(dāng)鼠標滑過這些DOM節(jié)點的時候手機上的相應(yīng)布局也會高亮起來，如下圖（點擊查看大圖）：

新聞名稱：包含html5iphone的詞條
文章源于：http://chinadenli.net/article34/dsisgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站制作、、電子商務(wù)、網(wǎng)站維護

廣告

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