Safari浏览器是没有办法禁止 iPhone Safari video标签视频自动全屏

在iOS APP中使用网页视频,是可以禁止全屏播放的,方法如下:
前端将video标签加入属性 webkit-playsinline,如:

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

Obj-C中,添加配置:webview.allowsInlineMediaPlayback = YES;

iOS10 原生支持 video 元素上添加 playsinline 特性即可。

iOS10 以下可以借助这个JS库:

https://github.com/bfred-it/iphone-inline-video

缺点是不支持多视频源,用的时候 video 元素上不能写 controls 特性

视频全屏常用代码:

<article>
  <h1 id="btn">这是一个标题</h1>
</article>
  

<video autoplay loop id="video-background" muted webkit-playsinline>
  <source src="493663023.mp4" type="video/mp4">
</video>
body{margin:0;padding:0;background:#333;background-attachment:fixed;background-size:cover}
#video-background{position:fixed;right:0;bottom:0;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-100}
article{position:absolute;top:0;left:0;right:0;bottom:0;border:10px solid rgba(255,255,255,.5);margin:10px}
h1{position:absolute;top:60%;width:100%;font-size:36px;letter-spacing:3px;color:#fff;font-family:Oswald,sans-serif;text-align:center}
h1 span{font-family:sans-serif;letter-spacing:0;font-weight:300;font-size:16px;line-height:24px}
h1 span a{color:#fff}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。