我用html5的video標(biāo)簽做的視頻頁(yè)面，在iphone上測(cè)試的時(shí)候視頻都是全屏的，怎么才能不全屏？

雖然有的網(wǎng)頁(yè)設(shè)置了自動(dòng)全屏，但是點(diǎn)了“x”之后退出了全屏并且視頻播放停下來(lái)了，點(diǎn)擊播放時(shí)又全屏了，但是我們可以退出全屏并繼續(xù)播放，具體方法：在全屏頁(yè)用兩指縮小手勢(shì)（不是下滑或點(diǎn)“x”，即刻退出全屏并繼續(xù)播放視頻。如果是的，請(qǐng)采納。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、疏附網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為疏附等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

HTML5播放器怎么雙擊全屏？

requestFullScreen。這是html5里面一個(gè)比較新的API。不同瀏覽器存在不同的方法前綴。需要區(qū)分。

可以對(duì)整個(gè)document進(jìn)行全屏，或?qū)δ硞€(gè)元素全屏（比如vidio控件）

通常瀏覽器都會(huì)預(yù)先進(jìn)行詢問(wèn)，比如彈出浮層讓用戶確認(rèn)是否要全屏。只有用戶確認(rèn)全屏，你的全屏操作才會(huì)生效。

HTML5是近十年來(lái)Web標(biāo)準(zhǔn)最巨大的飛躍。HTML5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它也將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻，音頻，動(dòng)畫(huà)，以及同電腦的交互都被標(biāo)準(zhǔn)化。隨著HTML5的發(fā)展，各個(gè)瀏覽器都已經(jīng)或即將支持HTML5。在大潮流的推動(dòng)下，微軟也表示將把HTML5作為IE9的核心，并將全力投入HTML5。

很多平時(shí)最喜歡上網(wǎng)看視頻、玩游戲的朋友經(jīng)常抱怨不爽，因?yàn)榫W(wǎng)上好多視頻和游戲都需要安裝Flash插件，并且速度也跟不上！HTML5的出現(xiàn)解決了這一難題。HTML5提供了音頻視頻的標(biāo)準(zhǔn)接口，實(shí)現(xiàn)了無(wú)需任何插件支持，只需瀏覽器支持相應(yīng)的HTML5標(biāo)簽。怪不得都說(shuō)HTML5是Flash的終結(jié)者！Safari5、Firefox4和Chrome6等瀏覽器加入了HTML5技術(shù)，可以免除Flash插件的安裝直接播放視頻 ！

如何實(shí)現(xiàn)HTML5全屏模式Full Screen API

fullscreen API 接口

屬性1：fullscreenElement 該屬性返回當(dāng)前處于全屏模式的DOM元素。

屬性2：fullscreenEnabled 該屬性返回當(dāng)前 document 是否進(jìn)入了可以請(qǐng)求全屏模式的狀態(tài)。

方法1：requestFullscreen() 請(qǐng)求進(jìn)入全屏模式。

方法2：exitFullscreen() 退出全屏模式。

事件1：fullscreenchange 進(jìn)入/退出全屏模式切換時(shí)會(huì)觸發(fā)。

事件2：fullscreenerror 進(jìn)入/退出全屏模式失敗時(shí)會(huì)觸發(fā)。

由于fullscreen API 存在瀏覽器兼容性問(wèn)題，所以我們?cè)谑褂玫臅r(shí)候需要進(jìn)行跨瀏覽器處理，參考代碼：

跨瀏覽器返回正處于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement;

//注意：要在用戶授權(quán)全屏后才能獲取全屏的元素，否則 fullscreenEle為null

console.log("全屏元素："+fullscreenEle);

return fullscreenEle;

}

跨瀏覽器返回當(dāng)前 document 是否進(jìn)入了可以請(qǐng)求全屏模式的狀態(tài)

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled;

//注意：要在用戶授權(quán)全屏后才能準(zhǔn)確獲取當(dāng)前的狀態(tài)

if(isFullscreen){

console.log('全屏模式');

}else{

console.log('非全屏模式');

}

}

跨瀏覽器發(fā)動(dòng)全屏

function lanchFullscreen(element){

if(element.requestFullscreen){

element.requestFullscreen();

}

else if(element.mozRequestFullScreen){

element.mozRequestFullScreen();

}

else if(element.msRequestFullscreen){

element.msRequestFullscreen();

}

else if(element.webkitRequestFullscreen){

element.webkitRequestFullScreen();

}

}

跨瀏覽器退出全屏

function exitFullscreen(){

if(document.exitFullscreen){

document.exitFullscreen();

}

else if(document.mozCancelFullScreen){

document.mozCancelFullScreen();

}

else if(document.msExitFullscreen){

document.msExiFullscreen();

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen();

}

}

各瀏覽器fullscreenchange 事件處理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各瀏覽器fullscreenerror 事件處理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨瀏覽器全屏模式下樣式代碼

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

如何使html5網(wǎng)頁(yè)游戲封裝成app后在安卓手機(jī)上全屏

打包成Android APP為例

下載安裝MyEclipse2014，Android SDK，eclipse(需配置Android開(kāi)發(fā)環(huán)境)

Java和Android環(huán)境安裝與配置，將另寫(xiě)經(jīng)驗(yàn)分享，讀者也可百度參考其他相關(guān)資料，自行安裝

打開(kāi)MyEclipse2014，新建一個(gè)HTML5 Mobile Application Project，命名，例如：hello

html5程序在工程www目錄下編輯；

編輯好我們的html5程序，下面就要開(kāi)始學(xué)習(xí)打包了

這里介紹兩種打包方式：1、PhoneGap Build Service 打包

PhoneGap官網(wǎng)有相關(guān)教程可參考，不具體介紹

2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好，android開(kāi)發(fā)環(huán)境)：

Step1、啟動(dòng)eclipse，新建Android Application Project，即Android工程，命名，例如：hello

Step2、將前面Myeclipse2014中編輯好的HTML5程序拷至剛剛在eclipse新建hello工程對(duì)應(yīng)assets目錄下面

Step3、下面要做的就是如何將我們的HTML5程序在Android應(yīng)用中啟動(dòng)，這里我們要使用Android系統(tǒng)自帶的WebView控件（具體信息參考Adroid開(kāi)發(fā)文檔）---在工程下找到res-layout-activity_main.xml并打開(kāi)，向里面插入WebView控件，編輯好自己想要的樣式

8

Step4、在主程序入口，用剛剛編輯好的WebView控件將HTML5程序引入，此時(shí)，主體功能已實(shí)現(xiàn)，編譯工程即可得到apk

我用HTML做了一個(gè)頁(yè)面想讓他在手機(jī)瀏覽器中全屏顯示 可是只用了多一半屏幕

首先建議你用html5來(lái)開(kāi)發(fā)，

然后，在網(wǎng)頁(yè)的head中增加以上這句話：

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /

可以讓網(wǎng)頁(yè)的寬度自動(dòng)適應(yīng)手機(jī)屏幕的寬度。

其中：

width=device-width ：表示寬度是設(shè)備屏幕的寬度

initial-scale=1.0：表示初始的縮放比例

minimum-scale=0.5：表示最小的縮放比例

maximum-scale=2.0：表示最大的縮放比例

user-scalable=yes：表示用戶是否可以調(diào)整縮放比例

如果是想要一打開(kāi)網(wǎng)頁(yè)，則自動(dòng)以原始比例顯示，并且不允許用戶修改的話，則是：

[html] view plaincopy

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /

這樣子寫(xiě)后，就可以把一些頁(yè)頭橫幅等的圖片的寬度都設(shè)置成style="width:100%"，整個(gè)頁(yè)面在設(shè)備上看起來(lái)就是全屏的了。

關(guān)鍵就是調(diào)整上面的幾個(gè)值了。

網(wǎng)站名稱：html5手機(jī)全屏,html5圖片全屏
文章路徑：http://aaarwkj.com/article42/dsiedec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、微信公眾號(hào)、關(guān)鍵詞優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(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)