更新media示例

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>
-      <input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-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 {

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;

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);

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({

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;