一.横竖屏操作的css样式：
<style type="text/css">
.heng{
width: 100%;
height: 100%;
}
.shu{
width: 100%;
}
#video{
width: 100%;
}
</style>
</head>
二.横竖屏操作的Html结构：
<body>
<video id="video" controls poster="img/1.png" src="video/1.mp4">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
该浏览器不兼容video标签
</video>
</body>
三：横竖屏操作的js部分：
<script type="text/javascript">
var videoObj=document.getElementById("video");
window.onorientatiοnchange=function(){
switch (window.orientation){
case 0: { //说明是竖屏
videoObj.className="shu";
break;
}
case 90: { //说明是左横屏
videoObj.className="heng";
break;
}
case -90: { //说明是右横屏
videoObj.className="heng";
break;
}
case 180: { //说明是倒立
break;
}
default:
break;
}
}
</script>
</html>
扫一扫
1848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
