html 5web端 video 豎屏怎么變橫屏

通過(guò)使用HTML5的 Screen Orientation API, 可以在JavaScript定義屏幕方向。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、蒼南網(wǎng)站維護(hù)、網(wǎng)站推廣。

所以用JS實(shí)現(xiàn)：

video?width="658"?height="444"?src="av.mp4"?autoplay="autoplay"/video

在頁(yè)面加載完成后?獲取瀏覽器高度以及寬度，再設(shè)置VIDEO元素高度寬度即可。

script?type="text/javascript"

function?resizeBody()?{

var?bodyHeight?=?document.documentElement.clientHeight;

$("#Flash1").height(bodyHeight?+?"px");

$("body").height(bodyHeight?+?"px");

}

$(function?()?{

resizeBody();

});

/script

body?style="?width:100%;?height:100%;"?onresize="resizeBody()"

附上HTML5中如何判斷橫屏豎屏：

1.首先在head中加入如下代碼：

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

minimum-scale=1.0,?maximum-scale=1.0,?user-scalable=no"/

針對(duì)上述viewport標(biāo)簽有如下說(shuō)明：

1)content中的width指的是虛擬窗口的寬度。

2)user-scalable=no就一定可以保證頁(yè)面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。

3)initial-scale=1.0 ? 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會(huì)將user-scalable理解為用戶手動(dòng)縮放，如果user-scalable=no，initial-scale將無(wú)法生效。

4)手機(jī)頁(yè)面可以觸摸移動(dòng)，但是如果有需要禁止此操作，就是頁(yè)面寬度等于屏幕寬度是頁(yè)面正好適應(yīng)屏幕才可以保證頁(yè)面不能移動(dòng)。

5)如果頁(yè)面是經(jīng)過(guò)縮小適應(yīng)屏幕寬度的，會(huì)出現(xiàn)一個(gè)問(wèn)題，當(dāng)文本框被激活（獲取焦點(diǎn)）時(shí)，頁(yè)面會(huì)放大至原來(lái)尺寸。

2.判斷橫屏豎屏：

1》CSS判斷橫屏豎屏：

寫在同一個(gè)CSS中：

@media?screen?and?(orientation:?portrait)?{

/*豎屏?css*/

}

@media?screen?and?(orientation:?landscape)?{

/*橫屏?css*/

}

分開寫在2個(gè)CSS中：

豎屏?

link?rel="stylesheet"?media="all?and?(orientation:portrait)"

href="portrait.css"

橫屏

link?rel="stylesheet"?media="all?and?(orientation:landscape)"

href="landscape.css"

2》JS判斷橫屏豎屏：

//判斷手機(jī)橫豎屏狀態(tài)：

window.addEventListener("onorientationchange"?in?window???"orientationchange"?:?"resize",?function()?{

if?(window.orientation?===?180?||?window.orientation?===?0)

{????????????alert('豎屏狀態(tài)！');????????}

if?(window.orientation?===?90?||?window.orientation?===?-90?)

{????????????alert('橫屏狀態(tài)！');????????}?????},?false);//移動(dòng)端的瀏覽器一般都支持window.orientation這個(gè)參數(shù)，通過(guò)這個(gè)參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。

如何解決html5游戲的橫屏問(wèn)題

可以監(jiān)聽屏幕旋轉(zhuǎn)事件，在屏幕旋轉(zhuǎn)的時(shí)候重新設(shè)定canvas的width和height。至于canvas里面的業(yè)務(wù)邏輯，就要寫橫屏豎屏的兼容了

如何禁止手機(jī)端html5頁(yè)面橫屏顯示

不同的瀏覽器有不同的做法，參考如下：

!-- uc強(qiáng)制豎屏 --

meta name="screen-orientation" content="portrait"

!-- QQ強(qiáng)制豎屏 --

meta name="x5-orientation" content="portrait"

!-- UC強(qiáng)制全屏 --

meta name="full-screen" content="yes"

!-- QQ強(qiáng)制全屏 --

meta name="x5-fullscreen" content="true"

!-- UC應(yīng)用模式 --

meta name="browsermode" content="application"

!-- QQ應(yīng)用模式 --

meta name="x5-page-mode" content="app"

!-- windows phone 點(diǎn)擊無(wú)高光 --

meta name="msapplication-tap-highlight" content="no"

!-- 適應(yīng)移動(dòng)端end --

設(shè)置橫屏應(yīng)用得在config里面設(shè)置，網(wǎng)頁(yè)是無(wú)法做到的

html5自適應(yīng)后橫向滾動(dòng)條還是存在？

你這個(gè)只不過(guò)是使用meta屬性來(lái)設(shè)置適配移動(dòng)端頁(yè)面。但是如果頁(yè)面的寬是超過(guò) 100% 的，滾動(dòng)條還是會(huì)出現(xiàn)的。

如何使用HTML5實(shí)現(xiàn)橫向滾動(dòng)？

實(shí)現(xiàn)原理：

1. 利用CSS3的@keyframes規(guī)則創(chuàng)建動(dòng)畫效果；

2. 使用CSS3的animation效果完成滾動(dòng)切換。

1 @-webkit-keyframes scrollText2 {

2 0%{

3 -webkit-transform: translateX(0px);

4 }

5 20%{

6 -webkit-transform: translateX(-204px);

7 }

8 40%{

9 -webkit-transform: translateX(-408px);

10 }

11 60%{

12 -webkit-transform: translateX(-612px);

13 }

14 80%{

15 -webkit-transform: translateX(-816px);

16 }

17 100%{

18 -webkit-transform: translateX(-1020px);

19 }

20 }

21 @keyframes scrollText2 {

22 0%{

23 transform: translateX(0px);

24 }

25 20%{

26 transform: translateX(-204px);

27 }

28 40%{

29 transform: translateX(-408px);

30 }

31 60%{

32 transform: translateX(-612px);

33 }

34 80%{

35 transform: translateX(-816px);

36 }

37 100%{

38 transform: translateX(-1020px);

39 }

40 }

41

42 .box4{

43 position: absolute;

44 top: 100px;

45 left: 100px;

46 width: 200px;

47 height: 30px;

48 overflow: hidden;

49 }

50 .border4{

51 position: absolute;

52 top: 0px;

53 left: 0px;

54 width: 1400px;

55 -webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;

56 animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;

57 }

58 .border4 div{

59 height: 30px;

60 width: 200px;

61 overflow: hidden;

62 display: inline-block;

63 }

64 .border4:hover{

65 animation-play-state:paused;

66 -webkit-animation-play-state:paused;

67 }

CSS代碼說(shuō)明：

@-webkit-keyframes及@keyframes定義了從0% ~ 100%之間，每過(guò)20%的時(shí)間，向左移動(dòng)204px，總共有6次移動(dòng)；

.box4 定義外容器的基本屬性

.border4 定義了內(nèi)容器的屬性，-webkit-animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 定義了用12s種循環(huán)一次，無(wú)限循環(huán)的效果；

.border4 div 定義了縱向滾動(dòng)內(nèi)容的基本樣式；

.border4:hover 定義了鼠標(biāo)移入容器時(shí)的效果，animation-play-state:paused 及 -webkit-animation-play-state:paused 定義了動(dòng)畫暫停；

1 div class="box4"

2 div class="border4"

3 divThis is a test 1./div

4 divThis is a test 2./div

5 divThis is a test 3./div

6 divThis is a test 4./div

7 divThis is a test 5./div

8 divThis is a test 1./div

9 /div

10 /div

HTML代碼說(shuō)明：

定義了6條信息可以橫向滾動(dòng)，其中前5條是真正橫向滾動(dòng)的信息，第6條和第1條信息是一樣的，原因和上一篇縱向滾動(dòng)一樣，因?yàn)槭褂昧薂keyframes方式來(lái)實(shí)現(xiàn)動(dòng)畫效果，第1條信息的效果是默認(rèn)為停止的，所以用第6條信息制作一個(gè)替代方法，在第一次循環(huán)結(jié)束后，可以無(wú)縫繼續(xù)滾動(dòng)。

html5可以自動(dòng)適應(yīng)橫豎屏嗎

可以適應(yīng)移動(dòng)設(shè)備的橫豎屏，但是有的設(shè)備還是會(huì)有點(diǎn)問(wèn)題，你可以分別寫：

/*豎屏*/

@media all and (orientation : portrait){

body {

background-color: #00ff00;

}

}

/*橫屏*/

@media all and (orientation : landscape) {

body {

background-color: #ff0000;

}

}