html5 webkit-playsinline这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放的video标签的一个属性。例如：
<video id="videoALL"
src="video/01.mp4"
poster="images/1.jpg" /*视频封面*/
preload="auto"
webkit-playsinline="true" playsinline="true" /*IOS微信浏览器支持小窗内播放/
style="object-fit:fill">
</video>
扩展资料
html5中video标签的常用属性介绍：
1、poster="images/1.jpg"
属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
2、preload="auto"
属性规定在页面加载后载入视频。
3、webkit-playsinline和playsinline
视频播放时局域播放，不脱离文档流 。这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。
4、x5-video-orientation
声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
5、x5-video-player-fullscreen
全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。
HTML5网页在电脑端和手机端都全屏显示的步骤如下：
1、打开HTML5网页代码。
2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：
<meta name="viewport" content="width=device-width
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0
user-scalable=no" />
3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。
你用js来控制就行了先获取屏幕的宽 然后减去你的页面宽 然后再除以二就行
屏幕宽度:screen.width
我用一个div来演示了:
<div id="div"></div>
<script>
function centers(){
var divs = document.getElementById("div")
document.getElementById("div").style.marginLeft = (screen.width -divs.offsetWidth)/2+"px"
}
</script>
