video场景所有
大图APP
- 发布：2021-06-15 14:34
- 更新：2021-09-24 15:43
- 阅读：1243
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 64位家庭版
HBuilderX类型： Alpha
HBuilderX版本号： 3.1.19
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 红米Note7
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
配置object-fit 为fill或者cover后poster 比例和视频第一帧不一致，
IOS端 poster到视频第一帧中间黑屏过度太长
配置object-fit 为fill或者cover后poster 比例和视频第一帧不一致，
IOS端 poster到视频第一帧中间黑屏过度太长
预期结果：
poster属性展示比例跟随object-fit属性值展示，
poster属性展示比例跟随object-fit属性值展示，
实际结果：
poster图展示比例始终固定跟随 object-fit=contain的比例,object-fit=fill 或者 object-fit=cover后过度到第一帧比例有明显差异
poster图展示比例始终固定跟随 object-fit=contain的比例,object-fit=fill 或者 object-fit=cover后过度到第一帧比例有明显差异
bug描述：
首先声明一下 这里的
poster图片尺寸完全和视频的第一帧100%一致。。
1.视频封面 poster属性的显示比例问题
按理来说这个poster 属性的比例应该跟随 objectfit属性 显示，不然的话会出现 视频封面 和 第一帧比例不一致、过度不平滑问题，下面我特别适用了图片来一 一展示 objectfit 配置后和 poster 带来的影响
属性 object-fit="cover"和objectfit:'fill'
object-fit="cover"和objectfit:'fill'展示效果 差不多，这里重点讲的是poster画面和视频画面比例。
2.视频封面 poster展示到视频播放的过度问题，
目前的效果是先显示 poster 图片，然后到视频播放时 要经过500毫秒左右的黑屏才显示第一帧画面。这个问题IOS端最明显。安卓端还好。
如果加载 poster 存在网络延迟的话 那就情况是这样的： 黑屏（500毫秒）=》显示 poster=》再黑屏（500毫秒）=》第一帧画面，播放一个视频前要闪屏好几次。
对于网页端的H5播放器来说稍微逊色那么一丢丢，这里当然不是单纯的吐槽原生播放器，而是指出一些可以进一步优化的问题。
