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属性,是静音播放,非静音播放只能手动点击一下触发播放事件了

发布了231 篇原创文章 · 获赞 79 · 访问量 57万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览