H5 Vue 视频 video 支持预览图 poster

最近项目上要求文章中插入视频，并且视频需要支持预览图，给用户更好的视觉效果。本来以为加上poster就够了，但是没想到 ios 微信内置浏览器会有如下这种效果，很影响视觉体验。

优化步骤：
1、上传视频的时候，获取视频的宽高。

<div v-for="(item, idx) in materials" :key="idx">
  <video :ref="`videoView${idx}`" class="cover" :src="item.url" />
</div>

const videoView = this.$refs[`videoView${idx}`];
materialValue = { url, videoWidth: videoView.videoWidth, videoHeight: videoView.videoHeight };

2、添加poster的时候，根据视频宽高对封面图片进行缩放。

if (video?.poster) {
  // 343：移动端 video 的宽度
  const height = parseInt(343 / materialValue.videoWidth * materialValue.videoHeight, 10);
  video.poster = `${video.poster}?x-oss-process=image/resize,m_lfit,h_${height}/resize,m_pad,w_343,h_${height}`;
  
const videoEl = `<div>
  <video controls poster="${video.poster}" src="${video.url}" width="100%"></video>
  <p style="display:none">.</p>
</div>`;
}

最后的效果：