ios video标签不自动播放和自动播放一直全屏播放问题处理、video视频填充容器

https://blog.csdn.net/qq_37604446/article/details/102485110

object-fit: cover; 视频设置为视频外层容器大小

fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。

contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。

cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。

none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。

scale-down：当内容大小设置了non或contain，将导致具体对象变得更小。

ios video标签不自动播放和自动播放一直全屏播放问题处理 给video标签添加一下属性即可：

//以下是移动端 无声自动播放，阻止了ios自动播放一进来就跳转视频放大问题 ios不允许有声自动播放
muted 
autoplay 
x5-video-player-fullscreen='true' 
x-webkit-airplay='true'  
x5-playsinline x-webkit-airplay='allow'
//阻止自动全屏播放的ios
webkit-playsinline='true'  
playsinline='true' 

 <video          
style="z-index: -1"
@click="play"
x5-video-player-type="h5"
controls="false"
:src="this.result.video"
:poster="this.result.thumb"
muted
autoplay
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
webkit-playsinline="true"
playsinline="true"
x5-playsinline
>
</video>

其中：webkit-playsinline='true'  playsinline='true' 阻止自动全屏播放的ios

muted 是静音的 autoplay 才自动播放 ios

 

大家注意了，这个操作虽然可以播放，但是因为muted属性，是静音播放，非静音播放只能手动点击一下触发播放事件了