uni-app 付款求购一个安卓和苹果传视频能截取一张缩略图的前端代码

在uni-app中实现一个可以上传视频并截取视频缩略图的功能，可以使用uni-app提供的API来实现。下面是一个简单的代码示例，展示了如何在安卓和苹果平台上实现这个功能。

首先，确保你的项目中已经引入了uni-app的相关依赖，并配置好了基本的项目结构。

页面模板 (template)

<template>
  <view class="container">
    <button @click="chooseVideo">选择视频</button>
    <video :src="videoSrc" controls></video>
    <image v-if="thumbnailSrc" :src="thumbnailSrc" class="thumbnail"></image>
    <button @click="generateThumbnail" :disabled="!videoSrc">生成缩略图</button>
  </view>
</template>

脚本部分 (script)

<script>
export default {
  data() {
    return {
      videoSrc: '',
      thumbnailSrc: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.videoSrc = res.tempFilePath;
        }
      });
    },
    generateThumbnail() {
      uni.createVideoContext('myVideo', this.videoContext);
      this.videoContext.seek(1); // 通常选择视频的第1秒作为缩略图
      this.videoContext.play();
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: (canvasRes) => {
            this.thumbnailSrc = canvasRes.tempFilePath;
          },
          fail: (err) => {
            console.error('生成缩略图失败', err);
          }
        }, this);
        this.videoContext.pause();
      }, 1000); // 等待一秒以确保seek完成
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('myVideo');
  }
};
</script>

样式部分 (style)

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.thumbnail {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
</style>

注意事项

1. 在<video>标签中，你需要添加一个id属性，比如id="myVideo"，以匹配uni.createVideoContext中的选择器。
2. 在generateThumbnail方法中，使用了setTimeout来等待一秒以确保seek操作完成。这是因为seek操作是异步的，直接获取缩略图可能会导致获取到的是视频开始处的帧。
3. 在实际项目中，你可能需要更精细地处理视频加载和播放状态，以及错误处理。

这个示例代码提供了一个基本的框架，你可以根据实际需求进行调整和扩展。