html5如何取消横屏,APP内嵌HTML5实现视频横屏播放

需求:

    页面是嵌套在app中的H5页面,点击首页的封面图加载播放视频页面,播放页只有一个video标签,所以如果如图就会很难看,并且播放按钮会很小,就像下图:

    需要做到打开页面的时候自动播放并且横屏。    于是我就找资料啊找资料,发现了很多种做法,并且逐一实验,没有找到合适的。┭┮﹏┭┮    最后找到一个插件,从中获得了启发,虽然H5不能使手机横过来,但是换个思路,可以把视频转90度!!!

    开始!

    首先,body下有一个div,里面只有一个video

关键代码:

    

#Flash1{-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}

这是让#Flash1旋转90度,光转过来还不行,需要将video的宽高也设置才可以,这里是写在window.onload方法中的:

var bodyHeight = document.documentElement.clientHeight;var bodyWidth = document.documentElement.clientWidth;$("#video").width((bodyHeight) + "px");$("#video").height((bodyWidth) + "px");        视频基本成型了,自动播放是在video属性里就可以找到,有autoplay和preload。 autoplay是视频在就绪后马上播放,preload是视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 我想了一下还是选择autoplay,毕竟刚进页面就要播放。不过有点问题,video的周围有白边并且不均匀,很难看呀。调试样式发现白边是包括在video里面的,这是为什么呢? 想了想可能是设置宽高时差的问题:视频有可能在设置宽高之前就播放了,这时候我将autoplay换成了preload,问题解决,变得均匀了。 可是,自动播放又没了!!! 又是一波找资料,原生js有支持video的播放(play())与暂停方法(pause()),终于,将play方法加在了设置宽高的后面,一个功能完成了。 在这期间,还做了很多的调试样式。

        完整代码如下:

#Flash1{-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}body{margin: 0px;padding: 0px;}function resizeBody() {var bodyHeight = document.documentElement.clientHeight;var bodyWidth = document.documentElement.clientWidth;$("#video").width((bodyHeight) + "px");$("#video").height((bodyWidth) + "px");var video = document.getElementById("video");video.play();}window.onload = function(){$("html").css("width","100%").css("height","100%");$("body").css("width","100%").css("height","100%");resizeBody();}

参考链接:

http://www.w3school.com.cn/tags/tag_video.asp

https://www.cnblogs.com/w-wanglei/p/5763103.html
mui如何单个html页面设置横屏 - DCloud问答uni-app如何禁止横屏 - DCloud问答手机横屏自适应怎么写_w3cschoolHTML5中判断横屏竖屏的方法(移动端)_html5_网页制作_脚本 ...HTML5中判断横屏竖屏 - 放开那个女孩的个人空间 ...如何禁止手机横屏显示呢-慕课网APP内嵌HTML5实现视频横屏播放_成长是一辈子的事-CSDN博客HTML5实战与剖析之判断移动端横屏竖屏功能 - 鹏程万里 ...如何开发HTML5移动端手机网站 - web开发 - 亿速云mui 控制旋转屏幕方向HTML特效代码大全(完整)javascrit 中事件Event(三)— HTML5事件HTML5+CSS3H5 video移动端小窗关闭Cocos2d-x-html5分析与调试适配不同分辨率屏幕H5动画卡顿优化H5移动端常见问题H5+ 常用API小程序与传统HTML5,CSS的区别小程序UI与传统HTML5区别基于HTML5之APP微信支付集成实现(转载)html5设备apihtml5+ nativeui-原生界面java——HTML、css、JavaScript、jQuery 详细介绍HTML5与CSS3基础教程笔记HTML代码大全第十三章:事件类型(HTML5事件、设备事件、触摸与手势事件)html中如何去掉浏览器右边的滚动条如何禁止视频在手机移动端页面中全屏播放Html基本结构、语法规则、常用标记/标签详讲H5、WebApp项目中常见的坑以及注意事项html特效大全1沉浸式,状态栏高度,刘海怎么开启,适配HTML特效代码大全(史上最全)Html body的滚动条禁止与启用html+css+js基础问答微信小程序的组件用法与传统HTML5标签的区别12个HTML和CSS必须知道的重点难点问题
福建晋江旅游攻略自由行偽基百科CkshWikiFandom浅田家BD高清浅田家云资源下载朱丽娅斯蒂尔斯JuliaStiles看明白Julia集如何在家自己清洗空调图自己动手清洗蒸发箱刘伯温的子孙刘伯温后人有哪些呢?爱问知识人springboot包括spring新民主主义革命属于范畴微信转发语音的小技巧乔宁封司珩小说CRS(金融账户涉税信息自动交换标准)工业设计名词解释题目腰部感觉很凉女人睡觉后背到腰都凉三个郎分别组什么词黑旋风电视剧43全集各位大神谁知道这两部日剧韩漫偷窥第2话完整