mui开发：苹果手机自动全屏解决方案

时间：2021-07-23 05:58:52

前一段时间，使用mui写app时，出现了苹果手机播放视频时，自动全屏的情况，并且无法点击控件，只能等到播放完毕后点击控件。

那么怎么解决这个问题呢，弟弟们请看我的下面。

1.在页面的video标签中，添加 playsinline webkit-playsinline x5-playsinline 属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6     <title></title>
 7     <script src="js/mui.min.js"></script>
 8     <link href="css/mui.min.css" rel="stylesheet"/>
 9     <script type="text/javascript" charset="utf-8">
10           mui.init();
11     </script>
12 </head>
13 <body>
14     <div class="mui-content" style="background-color: #000000;">
15 　　<!-- 下面video标签中的 playsinline webkit-playsinline x5-playsinline 是重点-->
16         <video width="100%" height="auto" id="videoPlay1" poster="/hyData/weixinPages/images/video-img.png"
17          controls=controls 
18          x5-playsinline=""
19         webkit-playsinline="true"
20          playsinline="true"> 
21             <source src="http://v6-dy.ixigua.com/23ab27365792171b3c1520591002d525/5da0ace0/video/m/220e3b27dfe9b3e4950ba1fc42c6ab2f88e1161977ab0000a0b930ce3267/" type="video/mp4">
22         </video>
23     </div>
24 </body>
25 </html>

2.需要在manifest.json的plus节点下新增allowsInlineMediaPlayback节点为true

1 "plus" : {
2         "splashscreen" : {
3             "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
4             "waiting" : true
5         },
6  "allowsInlineMediaPlayback": true, 7         "runmode" : "liberate", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
8         "signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==", /*可选，保留给应用签名，暂不使用*/

 

相关文章