compress-video.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <video class="video" :src="src"></video>
      <view class="uni-title">
        <text class="uni-subtitle-text">压缩前视频信息</text>
      </view>
      <text>{{beforeCompressVideoInfo}}</text>
      <view class="uni-title">
        <text class="uni-subtitle-text">压缩后视频信息</text>
      </view>
      <text>{{afterCompressVideoInfo}}</text>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="compressVideo">压缩视频</button>
      </view>
    </view>
    <input-data :defaultValue="null" title="压缩质量，low(低) medium(中) high(高)" type="string"
      @confirm="onQualityConfirm"></input-data>
    <!-- <input-data :defaultValue="null" title="码率，单位kbps" type="number" @confirm="onBitrateConfirm"></input-data> -->
    <!-- <input-data :defaultValue="null" title="帧率" type="number" @confirm="onFpsConfirm"></input-data> -->
    <input-data :defaultValue="null" title="相对于原视频的分辨率比例，取值范围(0, 1]" type="string"
      @confirm="onResolutionConfirm"></input-data>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: "compressVideo",
        src: "",
        beforeCompressVideoInfo: "",
        afterCompressVideoInfo: "",
        beforeCompressPath: "",
        afterCompressPath: "",
        quality: null as string | null,
        bitrate: null as number | null,
        fps: null as number | null,
        resolution: null as number | null,
      }
    },
    methods: {
      compressVideo() {
        if (this.beforeCompressPath == "") {
          uni.showToast({
            title: "请先选择视频",
            icon: "error"
          });
          return;
        }
        uni.showLoading({
          title: "视频压缩中"
        });
        uni.compressVideo({
          src: this.beforeCompressPath,
          quality: this.quality,
          resolution: this.resolution,
          success: (res) => {
            console.log("compressVideo success", JSON.stringify(res));
            this.src = res.tempFilePath;
            uni.showToast({
              title: "压缩成功",
              icon: null
            });
            uni.getVideoInfo({
              src: res.tempFilePath,
              success: (_res) => {
                this.afterCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
              }
            });
          },
          fail: (err) => {
            uni.showModal({
              title: "压缩视频失败",
              content: JSON.stringify(err),
              showCancel: false
            });
          },
          complete: (_) => {
            uni.hideLoading();
          }
        });
      },
      chooseVideo() {
        uni.chooseVideo({
          sourceType: ["album"],
          compressed: false,
          success: (res) => {
            this.beforeCompressPath = res.tempFilePath;
            this.src = res.tempFilePath;
            uni.getVideoInfo({
              src: res.tempFilePath,
              success: (_res) => {
                this.beforeCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
              }
            });
          }
        });
      },
      onQualityConfirm(value : string) {
        this.quality = value;
      },
      onBitrateConfirm(value : number) {
        this.bitrate = value;
      },
      onFpsConfirm(value : number) {
        this.fps = value;
      },
      onResolutionConfirm(value : string) {
        this.resolution = parseFloat(value);
      }
    }
  }
</script>

<style>
  .video {
    align-self: center;
  }

  .image-container {
    flex-direction: row;
  }
</style>