最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止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标签视频自动全屏?的更多相关文章

  1. video.js 视频自动全屏播放

    1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...

  2. 【html5】 解决 video标签 不自动全屏

    <video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...

  3. 阻止 iPhone 视频自动全屏

    最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...

  4. h5 video 点击自动全屏

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

  5. Video如何不自动全屏播放?

    知乎:微信内置浏览器 如何小窗不全屏播放视频? 目前在微信中只能全屏播放,只有加入腾讯白名单的视频才能小屏播放. 知乎上讨论的解决方案尚未测试,太麻烦了.

  6. ios 安卓 video 取消播放自动全屏 属性

    x-webkit-airplay="true",x5-playsinline="true",webkit-playsinline="true" ...

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

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

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

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

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

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

随机推荐

  1. 回文串---Best Reward

    HDU   3613 Description After an uphill battle, General Li won a great victory. Now the head of state ...

  2. ASP.NET WebAPI 11 参数验证

    在绑定完Action的所有参数后,WebAPI并不会马上执行该方法,而要对参数进行验证,以保证输入的合法性. ModelState 在ApiController中一个ModelState属性用来获取参 ...

  3. postgresql 9.6 rc1发布

    postgresql 9.6 rc1发布了,意味着postgresql 9.6正式版将会越来越近了. 对于dss来说,postgresql远优于mysql,尤其是9.6新引入的并行执行,将大大提高性能 ...

  4. [vim] vim入门

    1. 概述 工欲善其事 必先利其器.vim是非常好用的文本编辑器,可以将它看作是vi的进阶.绝大多数Unix系统都会内置vi编辑器,vi是文本编辑器,vim是程序编辑器.相比vi,它可以根据文件的类型 ...

  5. elasticsearch分词插件的安装

    IK简介 IK Analyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始, IKAnalyzer已经推出了4个大版本.最初,它是以开源项目Luen ...

  6. 为什么要用rem

    为什么要用rem 参考文章web app变革之rem 公司使用的375*667(也就是iPhone6)作为缩放比例标准,设计师是按照750px的标准出图 为了保证在不同的屏幕下显示效果基本等同,为此规 ...

  7. 用doxygen+graphviz自动化生成代码文档(附详细教程)

    一.引子 用这两个工具可以自动的遍历代码,并且产生代码文档,我们先来看看效果,然后放出这两个工具的下载地址. 二.工具的下载地址 doxygen:http://www.stack.nl/~dimitr ...

  8. Swing(一):JFrame框架窗体

    Swing窗体是一个组件,也是可视化的窗体,可以将其他组件放在这里.Jfream框架是一个容器,是Swing程序中各个组件的载体,可以将它看做为 一个容器,在开发中可以通过java.swing.jfr ...

  9. [android] SQLite 数据库的升级 和 降级

    public class SqliteHelp extends SQLiteOpenHelper { /* * context:创建数据库所需的 上下文对象 * name: 数据库名字 * facto ...

  10. Effective Java 阅读笔记——方法

    38:检查参数的有效性 每当编写方法或者构造器的时候,应该考虑它的参数有哪些限制,在方法的开头处对参数进行检查,并且把这些限制写入文档. 注意: 对于公有方法,应该使用@throws标签在文档中说明违 ...