移动端禁止视频全屏播放

本文由清尘发表于2018-10-16 17:19属于HTML/CSS分类

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}