html 5web端 video 竖屏怎么变横屏
4个回答
展开全部
通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。
所以用JS实现：
<video width="658" height="444" src="av.mp4" autoplay="autoplay"></video>
在页面加载完成后 获取浏览器高度以及宽度，再设置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"/>
针对上述viewport标签有如下说明：
1)content中的width指的是虚拟窗口的宽度。
2)user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
3)initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
4)手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
5)如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。
2.判断横屏竖屏：
1》CSS判断横屏竖屏：
写在同一个CSS中：
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}分开写在2个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判断横屏竖屏：
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0)
{ alert('竖屏状态！'); }
if (window.orientation === 90 || window.orientation === -90 )
{ alert('横屏状态！'); } }, false);//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-09-08 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
调用本地播放器吧，效果最好。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
更改video的width、height的值就可以了，望采纳！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
为一个文档定义屏幕方向
通过screen.orientation属性的lock()方法可以调整屏幕方向，其默认值是any，这允许设备根据其物理方向来应用任何方向。值”natural”将在设备的自然方向上显示网站，因设备而异。智能手机通常使用横屏，平板则使用竖屏。
screen.orientation.lock("natural");
上面的示例中，为设备设置自然方向。
当然，Screen Orientation API也允许你定义一个独立的方向，其有四个值可以选择，这已经包含了移动设备所有可能的方向。这四个值分别是： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
上图显示了所有四个值的方向： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
对于智能手机，值portrait-primary和值natural是一样的，并等同于默认方向。值portrait-secondary将横屏模式旋转180°，所以设置成设别的自然模式时，网站看起来几乎时颠倒的。
screen.orientation.lock("portrait-primary");
同样，landscape-secondary和landscape-primary不同之处是前者将屏幕旋转了180°。
你也可以不用secondary和primary，仅适用landscape和portrait作为关键字，这将允许设备在两种方向模（portrait-primary、 portrait-secondary或landscape-primary、 landscape-secondary）式下显示。
通过screen.orientation属性的lock()方法可以调整屏幕方向，其默认值是any，这允许设备根据其物理方向来应用任何方向。值”natural”将在设备的自然方向上显示网站，因设备而异。智能手机通常使用横屏，平板则使用竖屏。
screen.orientation.lock("natural");
上面的示例中，为设备设置自然方向。
当然，Screen Orientation API也允许你定义一个独立的方向，其有四个值可以选择，这已经包含了移动设备所有可能的方向。这四个值分别是： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
上图显示了所有四个值的方向： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
对于智能手机，值portrait-primary和值natural是一样的，并等同于默认方向。值portrait-secondary将横屏模式旋转180°，所以设置成设别的自然模式时，网站看起来几乎时颠倒的。
screen.orientation.lock("portrait-primary");
同样，landscape-secondary和landscape-primary不同之处是前者将屏幕旋转了180°。
你也可以不用secondary和primary，仅适用landscape和portrait作为关键字，这将允许设备在两种方向模（portrait-primary、 portrait-secondary或landscape-primary、 landscape-secondary）式下显示。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
