uniapp的 video 中的 poster 属性怎么使用

在Uniapp中，`video`组件的`poster`属性用于设置视频播放器的预览图像。当视频尚未加载或播放时，将显示该预览图像。以下是如何使用`poster`属性的示例：

1. 在组件的`template`中，将`poster`属性添加到`video`组件上。

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

2. 在组件的`data`中定义`posterUrl`变量，并将其设置为预览图像的URL。

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4',
      posterUrl: 'https://example.com/poster.jpg',
    };
  },
};
</script>

在上述示例中，`videoUrl`是要加载和播放的视频文件的URL，而`posterUrl`是要显示的预览图像的URL。当视频尚未加载或播放时，预览图像将作为占位符显示。

请注意，`poster`属性仅在视频加载之前有效。一旦视频加载完成并开始播放，预览图像将被替换。