如何禁止 iPhone Safari video标签视频自动全屏?
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签)。
如:
<video id="post" autoplay loop preload="auto">
<source src="foo.mp4" type="video/mp4">
</video>
在iPhone safari 点击视频会弹出播放器进行全屏播放。
在网上看了看别人给出的答案,引用如下:
可以在 video 标签上加一个 “webkit-playsinline” 属性 ,如下:
<video id="video" width="280" height="140" webkit-playsinline ></video>
我想说这能解决问题吗? 答案当然是不能。。。。
当然在iOS APP中使用网页视频,是可以禁止全屏播放的,方法如下:
前端将video标签加入属性 webkit-playsinline,如:
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C中,添加配置:
webview.allowsInlineMediaPlayback = YES
还有网友这样回答答案:
把视频转码,用ajax去分段请求数据来填充到canvas。
当然如果确实需要退出全屏,可以使用这样的方法,但是毕竟这样没什么必要。
所以最终的结论是:没有办法禁止 iPhone Safari video标签视频自动全屏.
如何禁止 iPhone Safari video标签视频自动全屏?的更多相关文章
- video.js 视频自动全屏播放
1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...
- 【html5】 解决 video标签 不自动全屏
<video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...
- 阻止 iPhone 视频自动全屏
最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...
- h5 video 点击自动全屏
加上如下属性 https://blog.csdn.net/weixin_40974504/article/details/79639478 可阻止自动全屏播放,感谢 https://blog.csdn ...
- Video如何不自动全屏播放?
知乎:微信内置浏览器 如何小窗不全屏播放视频? 目前在微信中只能全屏播放,只有加入腾讯白名单的视频才能小屏播放. 知乎上讨论的解决方案尚未测试,太麻烦了.
- ios 安卓 video 取消播放自动全屏 属性
x-webkit-airplay="true",x5-playsinline="true",webkit-playsinline="true" ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
随机推荐
- ASP.NET Core 1.0开发Web API程序
.NET Core版本:1.0.0-rc2Visual Studio版本:Microsoft Visual Studio Community 2015 Update 2开发及运行平台:Windows ...
- 删除单链表倒数第n个节点
基本问题 如何删除单链表中的倒数第n个节点? 常规解法 先遍历一遍单链表,计算出单链表的长度,然后,从单链表头部删除指定的节点. 代码实现 /** * * Description: 删除单链表倒数第n ...
- [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)
[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景 开发人员使用Visual Studio来开发TypeScript,可以很方 ...
- JavaScript indexOf() 方法和 lastIndexOf() 方法
一,定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索 ...
- 删除src值为空的img标签
今天刚刚完成了一个官网的前后台整站建设,虽然不是很复杂,但感觉获益良多.由于涉及到一点后台问题,所以期间遇到了不少问题.学到的东西,得作个总结.今天先讲讲img的路径问题.由于现在很多网站喜欢全屏大图 ...
- 结合微软开放api,使用MSN,Hotmail等登陆Sharepoint网站
成功使用Windows Live账号登陆SharePoint系统. 附上创建SPTrustedIdentityTokenIssuer的PS脚本====================RegSTS.ps ...
- SharePoint 2013 中代码创建列表查阅项字段
1.首先,打开VS创建两个List Definition,分别是Address和City,如下图: 2.City列表里修改Title为City Name,其实内部名称还是Title,注意一下: 3.给 ...
- 关于oracle-12514错误的修改方法
原因1: 打开文件"<OracleHome>/network/admin/listener.ora",添加 (SID_DESC = (GLOBAL_DB ...
- 复杂领域的Cynefin模型和Stacey模型
最近好奇“复杂系统”,收集了点资料,本文关于Cynefin模型和Stacey模型.图文转自互联网后稍做修改. Cynefin模型提供一个从因果关系复杂情度来分析当前情况而作决定的框架,提出有五个领域: ...
- 数位类统计问题--数位DP
有一类与数位有关的区间统计问题.这类问题往往具有比较浓厚的数学味道,无法暴力求解,需要在数位上进行递推等操作.这类问题往往需要一些预处理,这就用到了数位DP. 本文地址:http://www.cnbl ...