runsly CSS+DIV 2021-07-19

移动端禁止视频全屏播放

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}

HTML/CSS