禁止iPhone Safari video标签视频自动全屏的办法

2016-02-19 11:23 163 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的禁止iPhone Safari video标签视频自动全屏的办法,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 编程语言 】

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

代码如下:

video id="post" autoplay loop preload="auto"
source src="foo.mp4" type="video/mp4"
/video

在iPhone safari 点击视频会弹出播放器进行全屏播放。

在网上看了看别人给出的答案,引用如下:

可以在 video 标签上加一个 “webkit-playsinline” 属性 ,如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)

代码如下:

video id="video" width="280" height="140" webkit-playsinline /video

我想说这能解决问题吗? 答案当然是不能。。。。

当然在iOS APP中使用网页视频,是可以禁止全屏播放的,方法如下:

前端将video标签加入属性 webkit-playsinline,如:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/bianchengyuyan/)

代码如下:

video id="player" width="480" height="320" webkit-playsinline

Obj-C中,添加配置:

代码如下:

webview.allowsInlineMediaPlayback = YES

还有网友这样回答答案:

把视频转码,用ajax去分段请求数据来填充到canvas。

当然如果确实需要退出全屏,可以使用这样的方法,但是毕竟这样没什么必要。

所以最终的结论是:没有办法禁止 iPhone Safari video标签视频自动全屏.

来源:http://www.tulaoshi.com/n/20160219/1597303.html

延伸阅读
iPhone禁止程序联网方法   打开iPhone6手机【设置】,点击【蜂窝移动网络】,进入后可根据所需开关联网软件。(如下图) &nbTulaoshi.comsp;       注 :更多精彩教程请关注图老师手机教程栏目,图老师手机数码群:296605639欢迎你的加入 重新校准iPhone Home键技巧   iPhone使用过一...
iPhone Safari浏览器怎样清理缓存   第一步,在设置应用中,点击进入Safari选项。 第二步,在Safari选项页tulaoshi面,点击清除历史记录与网站数据。 第三步,在弹出的页面中,点击清除历史记录与网站数据即可。 7条iPhone屏幕保养秘笈   睡觉时远离iPhone:睡觉时远离iPhone不仅是为了我们的身体健...
标签: Web开发
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] neverModules - autocomplete  cross-browser IE 6.0 - Opera 9.0 - - Mozilla 1.5.0 Example list google suggest demo in this e.g response speed test, see this e.g using autocomplete in ajax, see this e.g neverModules online Document e.g feature 特性(我英文...
iPhone6怎么tuLaoShi.com查看Safari密码   iPhone6具有存储密码的功能,相信不少人都知道,但你可能还不知道可以查看safari密码吧!下面PC6图老师小编就带你去看下iPhone6 Safari密码存在哪里! iPhone6查看Safari密码方法教程: 1、在手机TuLaoShi.com设置这里进入Safari。 2、接着在这里选择密码与自动填充。 ...
iPhone怎么禁止程序联网   iPhone5S怎么禁止程序联网?5S控制联网软件方法。IOS自带软件联网控制功能,很多用户都不知道在哪里设置!导致大批用户还在傻傻的寻找着第三方应用。下面还是一起来看下iPhone5S怎么禁止程序联网方法吧! 进入iPhone5S【设置】界面,点击【蜂窝移动网络】,根据所需设置软件联网即可。(如下图) &nbsww...

经验教程

547

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部