uni-app video标签不指定poster时 H5服务在电脑端封面图为第一帧 手机端不显示封面图

在 uni-app 中使用 video 标签时，如果不指定 poster 属性，H5 服务在电脑端和手机端的表现确实会有所不同。具体表现如下：

1. 电脑端（PC浏览器）：

   • 如果不指定 poster 属性，浏览器通常会默认显示视频的第一帧作为封面图。

2. 手机端（移动浏览器）：

   • 如果不指定 poster 属性，大多数移动浏览器不会显示任何封面图，视频区域会显示为空白或加载状态。

解决方案

为了确保在电脑端和手机端都能显示封面图，建议你明确指定 poster 属性。poster 属性用于指定视频封面图的 URL，这样无论在任何设备上，封面图都会显示。

<video 
  src="your-video-url.mp4" 
  poster="your-poster-image-url.jpg"
  controls
></video>

其他注意事项

• 封面图尺寸：确保封面图的尺寸与视频的宽高比一致，以避免封面图被拉伸或压缩。
• 兼容性：虽然大多数现代浏览器都支持 poster 属性，但在一些旧版浏览器中可能会有兼容性问题。可以通过测试来确保兼容性。

动态设置封面图

如果你需要根据不同的条件动态设置封面图，可以在 uni-app 中使用数据绑定：

<template>
  <video 
    :src="videoUrl" 
    :poster="posterUrl"
    controls
  ></video>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'your-video-url.mp4',
      posterUrl: 'your-poster-image-url.jpg'
    };
  }
};
</script>