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

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

     <title></title>

     <script src="js/mui.min.js"></script>

     <link href="css/mui.min.css" rel="stylesheet"/>

     <script type="text/javascript" charset="utf-8">

           mui.init();

     </script>

 </head>

 <body>

     <div class="mui-content" style="background-color: #000000;">

 　　<!-- 下面video标签中的 playsinline webkit-playsinline x5-playsinline 是重点-->

         <video width="100%" height="auto" id="videoPlay1" poster="/hyData/weixinPages/images/video-img.png"

          controls=controls

          x5-playsinline=""

         webkit-playsinline="true"

          playsinline="true">

             <source src="http://v6-dy.ixigua.com/23ab27365792171b3c1520591002d525/5da0ace0/video/m/220e3b27dfe9b3e4950ba1fc42c6ab2f88e1161977ab0000a0b930ce3267/" type="video/mp4">

         </video>

     </div>

 </body>

 </html>

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

 "plus" : {

         "splashscreen" : {

             "autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/

             "waiting" : true

         },

         "allowsInlineMediaPlayback": true,

         "runmode" : "liberate", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/

         "signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==", /*可选，保留给应用签名，暂不使用*/

mui开发：苹果手机自动全屏解决方案的更多相关文章

  1. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  2. 【极品代码】一般人我不告诉他，手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  3. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  4. 如何禁止 iPhone Safari video标签视频自动全屏？

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  5. audio与video控件/标签的隐藏，iso/Android下自动全屏播放，短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

  6. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  7. h5 video 点击自动全屏

    加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...

  8. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  9. H5视频播放自动全屏，暂停退出全屏等功能

    html5视频播放自动全屏,暂停退出全屏等功能 在参考了html5 video fullScreen全屏实现方式及司徒正美的书<javascript框架设计>287页相关代码后,在Safa ...

随机推荐

  1. Okhttp 请求流程梳理

    最近在看 Okhttp 的源码.不得不说源码设计的很巧妙,从中能学到很多.其实网上关于 Okhttp 的文章已经很多了,自己也看了很多.但是俗话说得好,好记性不如烂笔头,当你动手的时候,你会发现你在看 ...

  2. 键盘常见ascii码值

    回车事件最常见,码值13 ESC键: VK_ESCAPE (27) 回车键: VK_RETURN (13) TAB键: VK_TAB (9) Caps Lock键: VK_CAPITAL (20) S ...

  3. CentOS生产环境无网络安装percona-xtrabackup2.4【RPM安装教程】

    Percona XtraBackup 8.0不支持对在MySQL 8.0之前的版本,Percona Server for MySQL或 Percona XtraDB Cluster中创建的数据库进行备 ...

  4. 一次flume exec source采集日志到kafka因为单条日志数据非常大同步失败的踩坑带来的思考

    本次遇到的问题描述,日志采集同步时,当单条日志(日志文件中一行日志)超过2M大小,数据无法采集同步到kafka,分析后,共踩到如下几个坑.1.flume采集时,通过shell+EXEC(tail -F ...

  5. NPOI 导出 excel 性能测试

    NPOI 导出 excel 性能测试 Intro 网上看到很多人说 NPOI 的性能不行,自己写了一个 NPOI 的扩展库,于是想尝试看看 NPOI 的性能究竟怎么样,道听途说始终不如自己动手一试. ...

  6. Alibaba 镜像

      <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> ...

  7. 【Java必修课】String.intern()原来还能这么用（原理与应用）

    1 简介 String.intern()是JDK一早就提供的native方法,不由Java实现,而是底层JVM实现,这让我们对它的窥探提高了难度.特别是在Oracle收购了Sun公司后,源代码不开源了 ...

  8. [考试反思]1012csp-s模拟测试70：盘旋

    这套题比较烂... 上来看到T2是原题,一想上一次考试遇到原题就不换,这次应该也是,于是直接开始码,码了一半然后换题了 T1打表找规律或者推式子都不难... T2水的一匹暴力剪枝即可,但是我并不知道数 ...

  9. NOIP模拟测试7

    期望得分:60+60+60 实际得分:60+60+0 这次考试主要是T3搜索打挂了(我可是靠搜索吃饭的); 1.数组开小了,不过开大数组只拿到了10分的好成绩. 2.题意没审清(其实是他没说清). 以 ...

  10. 2019.NET Conf China（中国.NET开发者峰会）活动全纪录：.NET技术之崛起，已势不可挡

    一.微软走向开放与.NET Core的诞生 当今时代,气象更新,技术飞速发展. 当今时代,开发者大概是最优秀的群体.每一位开发者,无不奋勇向前,努力追寻时代的步伐,以大无畏的精神迎接挑战,紧跟大时代成 ...