前一段时间,使用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==", /*可选,保留给应用签名,暂不使用*/