如何禁用iOS端Safari浏览器的特殊视频全屏播放模式

iOS端Safari播放视频默认唤起原生全屏的行为是可以禁用的，但原生全屏的系统样式无法做深度自定义，具体方案如下：

禁用默认自动原生全屏 #

给<video>标签添加内联播放属性即可禁止播放时自动唤起原生全屏，iOS 10及以上版本支持标准属性playsinline，兼容更早版本可以额外加带webkit前缀的私有属性：

<video 
  src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
  playsinline
  webkit-playsinline
></video>

补充说明：

• 添加上述属性后，视频会默认在页面内的标签位置内联播放，不会自动切系统全屏。如果需要完全禁止用户手动触发原生全屏，可以监听全屏变更事件，触发时立刻调用退出全屏方法拦截即可，对应事件和方法需要同时兼容标准写法和webkit前缀写法。
• 如果是iOS端第三方App内嵌的WebView（比如微信、QQ内置浏览器），可以额外添加x5-playsinline属性兼容腾讯X5内核的内联播放规则。

全屏样式自定义说明 #

iOS Safari的原生全屏是系统级渲染的组件，不支持深度自定义UI样式，你无法修改原生控制条的布局、配色、按钮逻辑等系统默认展示的内容，仅能通过属性做有限的功能开关：

• 添加controlslist="nodownload nofullscreen noremoteplayback"属性，可以隐藏原生控制条上的下载、全屏、隔空播放入口
• 添加disablepictureinpicture属性，可以隐藏画中画功能入口

如果需要完全自定义全屏播放的样式，不要使用系统原生全屏能力，自行实现伪全屏即可：给视频标签套一层外层容器，点击自定义全屏按钮时，给容器设置固定定位、宽高铺满视口、z-index置顶，所有播放控件都自行在容器内实现渲染，这种方案下所有样式、交互都可以完全自主定义，目前主流的开源网页播放器均采用该方案实现自定义全屏效果。

问题复现的默认效果截图如下：

内容的提问来源于stack exchange，提问作者Stefan Löhers