在uniapp中nvue里<view style="height: 350rpx;width: 300rpx;"><video style="height: 350rpx;">视频不居中怎办

您可以尝试在 `<view>` 标签中添加 `display: flex; justify-content: center; align-items: center;` 样式来使 `<video>` 元素居中显示。修改后的代码如下所示：

<view style="height: 350rpx;width: 300rpx; display: flex; justify-content: center; align-items: center;">
  <video style="height: 350rpx;"></video>
</view>

其中，`display: flex;` 将 `<view>` 元素设置为弹性布局，`justify-content: center;` 和 `align-items: center;` 分别将子元素在水平和垂直方向上居中显示。

相关问题

在uniapp中nvue页面中将上传的视频通过前端获取第一帧,并将第一帧图片保存到后端<video style=height: 350rpx;width: 750rpx; :src=urls/><view @click=upload(item)> upload(item) { uni.chooseVideo({count: 1,so

好的，您的问题是如何在uniapp中获取上传视频的第一帧，并将其保存到后端。在nvue页面中，您可以使用`<video>`元素来加载视频，并通过`loadedmetadata`事件获取视频的元数据，包括视频的宽度、高度、时长等信息。然后，您可以使用Canvas将视频的第一帧转换为图像，并将其保存到后端。

以下是一个简单的示例代码，供您参考：

<template>
  <video style="height: 350rpx;width: 750rpx;" :src="urls"></video>
  <view @click="upload(item)">上传</view>
</template>

<script>
export default {
  data() {
    return {
      urls: ''
    }
  },
  methods: {
    upload() {
      uni.chooseVideo({
        count: 1,
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.urls = res.tempFilePath
          this.getFirstFrame()
        }
      })
    },
    getFirstFrame() {
      const video = this.$refs.video
      const canvas = document.createElement('canvas')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
      const dataUrl = canvas.toDataURL('image/jpeg')
      // 将dataUrl发送到后端保存
    }
  }
}
</script>

在这个示例中，我们使用`<video>`元素来加载视频，并且设置了一个宽高比例为750:350的容器来展示视频。当用户点击上传按钮时，我们调用`uni.chooseVideo`方法来选择要上传的视频文件，并将其临时文件路径赋值给`<video>`元素的`src`属性。在`success`回调函数中，我们调用`getFirstFrame`方法获取视频的第一帧图像，并将其转换为Base64编码的字符串。最后，我们可以将该字符串发送到后端进行保存。

请注意，由于Canvas操作会占用较多的CPU资源，因此在处理大型视频文件时可能会出现性能问题。您可以考虑使用Web Worker或其他技术来将Canvas操作放在后台线程中进行，以避免阻塞主线程。

在uniapp中nvue页面用不了Canvas怎办，将上传的视频通过前端获取第一帧,并将第一帧图片保存到后端<video style=height: 350rpx;width: 750rpx; :src=urls/><view @click=upload(item)> upload(item) { uni.chooseVideo({count: 1,

在uni-app中，你可以通过以下步骤获取视频的第一帧，并将第一帧保存到后端：

1. 在模板中，通过`<video>`标签来加载视频：

<video style="height: 350rpx;width: 750rpx;" :src="videoUrl" @loadedmetadata="handleLoadedMetadata"></video>

这里我们绑定了`videoUrl`变量来加载视频，同时绑定了`loadedmetadata`事件，用于在视频元数据加载完成后调用`handleLoadedMetadata`函数。

2. 在脚本中，定义`videoUrl`变量，并在`handleLoadedMetadata`函数中获取视频第一帧：

export default {
  data() {
    return {
      videoUrl: '', // 视频地址
      thumbnailUrl: '', // 缩略图地址
    }
  },
  methods: {
    handleLoadedMetadata() {
      const video = this.$refs.video // 获取视频元素
      const canvas = document.createElement('canvas') // 创建画布
      canvas.width = video.videoWidth // 设置画布宽度
      canvas.height = video.videoHeight // 设置画布高度
      const ctx = canvas.getContext('2d') // 获取画布上下文
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height) // 绘制视频帧
      const thumbnailUrl = canvas.toDataURL('image/jpeg') // 将画布转为base64格式
      this.thumbnailUrl = thumbnailUrl // 将缩略图地址保存到变量中
    },
    async upload(item) {
      // 将缩略图上传到后端
      const res = await uni.request({
        url: 'your_backend_upload_api',
        method: 'POST',
        header: {
          'Content-Type': 'application/json'
        },
        data: {
          thumbnailUrl: this.thumbnailUrl
        }
      })
      console.log(res)
    }
  }
}

在`handleLoadedMetadata`函数中，我们通过`this.$refs.video`获取视频元素，然后创建一个画布，并将画布的宽高设置为视频的宽高。接着，我们通过画布的`getContext`方法获取画布上下文，调用`drawImage`方法绘制视频帧，最后通过`toDataURL`方法将画布转为base64格式的图片。将这个base64格式的图片地址保存到`thumbnailUrl`变量中。

3. 在上传视频的方法中，将缩略图上传到后端：

async upload(item) {
  // 选择视频文件
  const res = await uni.chooseVideo({
    count: 1,
    success: (res) => {
      this.videoUrl = res.tempFilePath // 将视频地址保存到变量中
    }
  })
  // 将缩略图上传到后端
  const res = await uni.request({
    url: 'your_backend_upload_api',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      thumbnailUrl: this.thumbnailUrl
    }
  })
  console.log(res)
}

在这个方法中，我们通过`uni.chooseVideo`方法选择视频文件，并将视频地址保存到`videoUrl`变量中。接着，我们调用`uni.request`方法将缩略图的base64格式的地址上传到后端。

需要注意的是，由于视频第一帧的绘制是异步的，因此在上传缩略图时需要确保第一帧已经绘制完成。如果上传缩略图的方法与视频加载的方法不在同一个组件中，可以将`thumbnailUrl`保存到全局变量中，在上传缩略图时再取出使用。