更新media示例

e0ab9857 · DCloud-yinjiacheng · 9eb17436 · e0ab9857 · e0ab9857 · e0ab9857
5 changed file
--- a/pages/API/choose-video/choose-video.uvue
+++ b/pages/API/choose-video/choose-video.uvue
@@ -4,13 +4,15 @@
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
-      <video class="video" :src="src"></video>
+      <video class="video" :src="src" :controls="true"></video>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseVideo">选取视频</button>
      </view>
      <enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
      <enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
+    </view>
    <input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
+    <view class="uni-padding-wrap">
      <boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
    </view>
  <!-- #ifdef APP -->
@@ -19,7 +21,7 @@
 </template>

 <script>
-  import { ItemType } from '@/components/enum-data/enum-data'
+  import { ItemType } from '@/components/enum-data/enum-data';
  export default {
    data() {
      return {

--- a/pages/API/compress-image/compress-image.uvue
+++ b/pages/API/compress-image/compress-image.uvue
@@ -25,8 +25,8 @@
    </view>
    <input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
      @confirm="onQualityConfirm"></input-data>
-    <input-data title="压缩后图片的宽度，单位px" type="number" @confirm="onCompressedWidthConfirm"></input-data>
-    <input-data title="压缩后图片的高度，单位px" type="number" @confirm="onCompressedHeightConfirm"></input-data>
+    <input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
+    <input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
    <input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string" @confirm="onWidthConfirm"></input-data>
    <input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string" @confirm="onHeightConfirm"></input-data>
    <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
@@ -36,6 +36,9 @@
 </template>

 <script>
+  // #ifdef APP-ANDROID
+  import FileInputStream from 'java.io.FileInputStream';
+  // #endif
  export default {
    data() {
      return {
@@ -82,7 +85,11 @@
            uni.getImageInfo({
              src: res.tempFilePath,
              success: (_res) => {
-                this.afterCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
+                this.afterCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
+                // #ifdef APP-ANDROID
+                const size = new FileInputStream(res.tempFilePath.substring("file://".length)).available() / 1024;
+                this.afterCompressImageInfo = this.afterCompressImageInfo.concat(`图片大小: ${size}KB`);
+                // #endif
              }
            });
          },
@@ -108,7 +115,11 @@
            uni.getImageInfo({
              src: res.tempFilePaths[0],
              success: (_res) => {
-                this.beforeCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
+                this.beforeCompressImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n`;
+                // #ifdef APP-ANDROID
+                const size = new FileInputStream(res.tempFilePaths[0].substring("file://".length)).available() / 1024;
+                this.beforeCompressImageInfo = this.beforeCompressImageInfo.concat(`图片大小: ${size}KB`);
+                // #endif
              }
            });
          }
@@ -117,11 +128,11 @@
      onQualityConfirm(value : number) {
        this.quality = value;
      },
-      onCompressedWidthConfirm(value : number) {
-        this.compressedWidth = value;
+      onCompressedWidthConfirm(value : string) {
+        this.compressedWidth = parseInt(value);
      },
-      onCompressedHeightConfirm(value : number) {
-        this.compressedHeight = value;
+      onCompressedHeightConfirm(value : string) {
+        this.compressedHeight = parseInt(value);
      },
      onWidthConfirm(value : string) {
        this.width = value;

--- a/pages/API/compress-video/compress-video.uvue
+++ b/pages/API/compress-video/compress-video.uvue
@@ -4,11 +4,12 @@
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
-      <video class="video" :src="src"></video>
+      <video class="video" :src="beforeCompressPath" :controls="true"></video>
      <view class="uni-title">
        <text class="uni-subtitle-text">压缩前视频信息</text>
      </view>
      <text>{{beforeCompressVideoInfo}}</text>
+      <video class="video" :src="afterCompressPath" :controls="true"></video>
      <view class="uni-title">
        <text class="uni-subtitle-text">压缩后视频信息</text>
      </view>
@@ -19,11 +20,8 @@
      <view class="uni-btn-v">
        <button type="primary" @click="compressVideo">压缩视频</button>
      </view>
+      <enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
    </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 -->
@@ -32,11 +30,11 @@
 </template>

 <script>
+  import { ItemType } from '@/components/enum-data/enum-data';
  export default {
    data() {
      return {
        title: "compressVideo",
-        src: "",
        beforeCompressVideoInfo: "",
        afterCompressVideoInfo: "",
        beforeCompressPath: "",
@@ -45,6 +43,8 @@
        bitrate: null as number | null,
        fps: null as number | null,
        resolution: null as number | null,
+        qualityItemTypes: [{ "value": 0, "name": "low(低)" }, { "value": 1, "name": "medium(中)" }, { "value": 2, "name": "high(高)" }] as ItemType[],
+        qualityItems: ["low", "medium", "high"]
      }
    },
    methods: {
@@ -65,7 +65,7 @@
          resolution: this.resolution,
          success: (res) => {
            console.log("compressVideo success", JSON.stringify(res));
-            this.src = res.tempFilePath;
+            this.afterCompressPath = res.tempFilePath;
            uni.showToast({
              title: "压缩成功",
              icon: null
@@ -73,7 +73,7 @@
            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`;
+                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`;
              }
            });
          },
@@ -95,24 +95,17 @@
          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`;
+                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;
+      onQualityChange(value : number) {
+        this.quality = this.qualityItems[value];
      },
      onResolutionConfirm(value : string) {
        this.resolution = parseFloat(value);

--- a/pages/API/get-video-info/get-video-info.uvue
+++ b/pages/API/get-video-info/get-video-info.uvue
@@ -7,7 +7,7 @@
      <view class="uni-title">
        <text class="uni-subtitle-text">获取本地绝对路径视频信息</text>
      </view>
-      <video class="video" :src="absoluteVideoPath"></video>
+      <video class="video" :src="absoluteVideoPath" :controls="true"></video>
      <text class="margin-top-10">{{absoluteVideoInfo}}</text>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseVideo">拍摄视频或从相册中选择视频</button>
@@ -37,7 +37,7 @@
              src: res.tempFilePath,
              success: (_res) => {
                console.log("getVideoInfo success", JSON.stringify(res));
-                this.absoluteVideoInfo = `视频画面方向: ${_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`;
+                this.absoluteVideoInfo = `视频画面方向: ${_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({

--- a/pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue
+++ b/pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue
@@ -4,7 +4,7 @@
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
-      <video class="video" :src="src"></video>
+      <video class="video" :src="src" :controls="true"></video>
      <button type="primary" class="margin-top-10" @click="saveVideo">将视频保存到手机相册</button>
    </view>
  <!-- #ifdef APP -->
@@ -47,7 +47,7 @@
        title: '视频下载中'
      });
      uni.downloadFile({
-        url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
+        url: 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
        success: (res) => {
          console.log("download video success", res.tempFilePath);
          this.src = res.tempFilePath;