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

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

时间: 2024-11-08 17:46:41

禁止iPhone Safari video标签视频自动全屏的办法_IOS的相关文章

优酷视频不能全屏问题解决办法

优酷视频不能全屏问题解决办法 一.取消全屏, 右键点击播放器, 选择菜单中的"设置-"("setting-"), 在"显示"(Display)中的"启用硬件加速"选项取消, 重新点击全屏观看即可看到画面. 二.flash player 版本过低,网络正常连接状态下,打开 C:\WINDOW\Ssystem32\MacromedFlash 双击 FlashUtil9e.exe 安装该程序,安装完毕,手动重启电脑!还不行的话就直接

html5 视频在iphone手机上如何能不自动全屏

问题描述 html5 视频在iphone手机上如何能不自动全屏 html5 video视频标签在手机iphone浏览器中 会自动全屏打开 请问有什么方式能让他不全屏么 在网页中该展示多大就是多大的 解决方案 瞎逛逛,看空间有没有好东西

javascript-禁止video标签自动全屏播放

问题描述 禁止video标签自动全屏播放 <video loop onClick="javascript:clickVideo();" ><source src="" type="video/webm"> </video> 原本是在被点击时才播放,但是在华为mate8手机上进入页面后,总是自动全屏播放,求大神指点. 解决方案 video用div代替,放个播放按钮做背景水平垂直居中,onclick加到div上,然

vc++6.0-vc++在vfw下如何实现像qq视频聊天全屏显示一样将usb摄像头全屏显示?

问题描述 vc++在vfw下如何实现像qq视频聊天全屏显示一样将usb摄像头全屏显示? vc++在vfw下如何实现像qq视频聊天全屏显示一样将usb摄像头全屏显示?若能实现能给个例子参考下吗? 解决方案 msdn上有例子,这个问题论坛有人问了好几次了. 解决方案二: msdn上有例子,这个问题论坛有人问了好几次了. 解决方案三: 怎样实现全屏显示(vc)VC实现全屏显示VC++实现程序全屏显示

html5-HTML5,javascript如何让浏览器自动全屏显示(或者python实现)

问题描述 HTML5,javascript如何让浏览器自动全屏显示(或者python实现) <html > <meta charset="UTF-8"> <body> <button onclick="launchFullscreen(document.documentElement);">启动全屏</button> <script> function launchFullscreen(elem

transform实现HTML5 video标签视频比例拉伸实例详解_相关技巧

曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用: 因为当我横向拉伸时: 当我纵向拉伸时: 2016-09-21 11:15:40 更新: 感谢 @RileyRen 提醒,原来还有object-fit这一属性,把它设置为fill就满足需求了,泪奔~,这篇文章就当看个笑话吧,哎,不过可以看看我家喵星人的处

帝国cms自带的flash内容模板视频不能全屏的实现方法

介绍下flash视频栏目实现全屏播放的方法如下: flash内容模板修改的,代码如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" name="top10movie" wid

wpf 视频监控全屏 全屏之后 视频对象窗口不变大

问题描述 下面的代码示例演示使用Child属性将承载的控件添加到WindowsFormsHost元素.有关详细信息,请参阅演练:在WPF中承载ActiveX控件.C#privatevoidWindow_Loaded(objectsender,RoutedEventArgse){//Createtheinterophostcontrol.System.Windows.Forms.Integration.WindowsFormsHosthost=newSystem.Windows.Forms.Int

Windows 10穿越火线不能自动全屏怎么办

1.安装好驱动后打开英特尔显卡控制中心,进入显示器:     2.分辨率改成1024X768, 点击下面的保存配置式,起个名字叫CF:     3.返回到上级菜单,进入"配置式",左上角选择刚才的CF配置,选择触发器选择"应用程序",点击右下角的浏览:     4.找到穿越火线的主程序"crossfire.exe",点打开:     5.这时,可以看到应用程序中的"Client MFC Application",即穿越火线的程