如何禁止 iPhone Safari 视频自动全屏?

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

由JavaScript控制播放 不使用video标签controls属性
iPhone safari 点击视频会弹出播放器进行全屏播放

如何不全屏 使视频在网页中播放?


iPhone Safari 中播放视频只能全屏,所以这个问题是没有答案的。
-------------------------------------
以下为拓展,
在iOS APP中使用网页视频,是可以禁止全屏播放的,方法如下:
  1. 前端将video标签加入属性 webkit-playsinline,如:<video id="player" width="480" height="320" webkit-playsinline>;
  2. Obj-C中,添加配置:webview.allowsInlineMediaPlayback = YES;
这样web视频就可以嵌入播放了,方案参考:
HTML5 inline video on iPhone vs iPad/Browser
链接:https://www.zhihu.com/question/21094425/answer/56014727


iOS10 原生支持啦~ video 元素上添加 playsinline 特性即可。
New <video> Policies for iOS

iOS10 以下(亲测 iOS9)可以借助这个JS库:
GitHub - bfred-it/iphone-inline-video: Make videos playable inline on the iPhone (prevents automatic fullscreen)
缺点是不支持多视频源,用的时候 video 元素上不能写 controls 特性
链接:https://www.zhihu.com/question/21094425/answer/127476949


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值