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}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。