choose-video.uvue 4.5 KB
Newer Older
DCloud-WZF's avatar
DCloud-WZF 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<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" :controls="true"></video>
      <view class="uni-title">
        <text class="uni-subtitle-text">视频信息</text>
      </view>
      <text>{{videoInfo}}</text>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseVideo">选取视频</button>
      </view>
15 16
      <enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
      <!-- #ifdef APP -->
17
      <enum-data title="屏幕方向" :items="orientationTypeItemTypes" @change="onOrientationTypeChange"></enum-data>
18
      <!-- #endif -->
DCloud-WZF's avatar
DCloud-WZF 已提交
19
      <enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
张磊 已提交
20 21 22
      <!-- #ifdef APP-ANDROID -->
      <enum-data title="相册模式" :items="albumModeTypes" @change="onAlbumModeChange"></enum-data>
      <!-- #endif -->
DCloud-WZF's avatar
DCloud-WZF 已提交
23 24 25 26 27 28 29 30 31 32 33 34 35
    </view>
    <input-data title="最长拍摄时间,单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
    <!-- #ifdef APP -->
    <view class="uni-padding-wrap">
      <boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
    </view>
    <!-- #endif -->
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
D
DCloud_LXH 已提交
36
  import { ItemType } from '@/components/enum-data/enum-data-types';
DCloud-WZF's avatar
DCloud-WZF 已提交
37 38 39 40 41 42
  type Camera = "back" | "front"
  type Source = "album" | "camera"
  export default {
    data() {
      return {
        title: "chooseVideo",
43
        src: "",
44
        orientationTypeItemTypes: [{ "value": 0, "name": "竖屏" }, { "value": 1, "name": "横屏" }, { "value": 2, "name": "自动" }] as ItemType[],
DCloud-WZF's avatar
DCloud-WZF 已提交
45 46 47
        sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
        sourceTypeItems: [["album"], ["camera"], ["album", "camera"]] as Source[][],
        cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
张磊 已提交
48 49
        albumModeTypes: [{ "value": 0, "name": "自定义视频选择器" }, { "value": 1, "name": "系统视频选择器" }] as ItemType[],
        albumModeTypeItems: ["custom", "system"],
DCloud-WZF's avatar
DCloud-WZF 已提交
50
        cameraItems: ["back", "front"] as Camera[],
51 52
        sourceType: ["album", "camera"] as Source[],
        orientationType: "portrait",
53
        orientationTypeItems: ["portrait", "landscape", "auto"],
DCloud-WZF's avatar
DCloud-WZF 已提交
54 55 56
        compressed: true,
        maxDuration: 60,
        camera: "back" as Camera,
57
        videoInfo: "",
张磊 已提交
58
        albumMode: "custom"
DCloud-WZF's avatar
DCloud-WZF 已提交
59 60 61 62 63 64 65
      }
    },
    methods: {
      chooseVideo() {
        uni.chooseVideo({
          sourceType: this.sourceType,
          // #ifdef APP
66
          compressed: this.compressed,
67
          pageOrientation: this.orientationType,
DCloud-WZF's avatar
DCloud-WZF 已提交
68
          // #endif
69
          maxDuration: this.maxDuration,
70
          // #ifdef APP-ANDROID
张磊 已提交
71
          albumMode: this.albumMode,
72
          // #endif
DCloud-WZF's avatar
DCloud-WZF 已提交
73 74 75 76 77 78 79 80 81 82 83 84 85 86
          camera: this.camera,
          success: (res) => {
            console.log("chooseVideo success", JSON.stringify(res));
            this.src = res.tempFilePath;
            this.videoInfo = `视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n`;
          },
          fail: (err) => {
            uni.showModal({
              title: "选择视频失败",
              content: JSON.stringify(err),
              showCancel: false
            });
          }
        });
87 88 89
      },
      onOrientationTypeChange(value : number) {
        this.orientationType = this.orientationTypeItems[value];
DCloud-WZF's avatar
DCloud-WZF 已提交
90 91 92 93 94 95 96 97 98 99 100 101
      },
      onSourceTypeChange(value : number) {
        this.sourceType = this.sourceTypeItems[value];
      },
      onCompressedChange(value : boolean) {
        this.compressed = value;
      },
      onMaxDurationConfirm(value : number) {
        this.maxDuration = value;
      },
      onCameraChange(value : number) {
        this.camera = this.cameraItems[value];
102
      },
张磊 已提交
103 104
      onAlbumModeChange(value : number) {
        this.albumMode = this.albumModeTypeItems[value]
DCloud-WZF's avatar
DCloud-WZF 已提交
105 106 107 108 109 110 111 112 113 114 115
      }
    }
  }
</script>

<style>
  .video {
    align-self: center;
    width: 300px;
    height: 225px;
  }
D
DCloud_LXH 已提交
116
</style>