video适配android和ios全屏显示设置的属性

Posted 2023-04-17

参考技术A 效果要求 ：按住按钮视频全屏播放，松开暂停；

ios；

<video id="video" style=" object-fit: fill" preload="auto"  x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" preload="auto" width=100%; height=100%;  src="图片地址"> </video>

效果预览

android

<video id="video2" style=" object-fit: fill" preload="auto" autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  width=100%; height=100%; src="图片地址">  </video>

Android上不能像苹果一样在浏览器里内嵌播放视频，会加载一个视频播放器全屏播放；

效果预览

相关属性介绍 点击这里

object-fit介绍 点击这里

ios下app内嵌h5页面是video适配问题

ios下做新闻详情用h5页面实现然后打包到app中，其中新闻详情页会有视频，安卓下video的poster可以做到适应video大小，但是ios下会按照poster图片大小将video等比撑大，但是视频显示不全（超出手机宽度），原始poster图片大小是750x420尝试诸多方法包括设置object-fit:fill;等，都无效，最后把封面图等比缩小为420x236完美解决；

总结：

ios下的webview会将video的poster等比放大适应video；但不会等比缩小适应video；