EveryLike/pages/API/get-video-info/get-video-info.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-title">
        <text class="uni-subtitle-text">获取本地绝对路径视频信息</text>
      </view>
      <video class="video" :src="absoluteVideoPath" :controls="true" :poster="absoluteCoverImagePath"></video>
      <text class="margin-top-10">{{absoluteVideoInfo}}</text>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseVideo">拍摄视频或从相册中选择视频</button>
      </view>
    </view>
    <!-- #ifndef MP -->
    <view class="uni-padding-wrap">
      <view class="uni-title">
        <text class="uni-subtitle-text">获取本地相对路径视频信息</text>
      </view>
      <video class="video" :src="relativeVideoPath" :controls="true" :poster="relativeCoverImagePath"></video>
      <text class="margin-top-10">{{relativeVideoInfo}}</text>
    </view>
    <!-- #endif -->
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: "getVideoInfo",
        relativeVideoPath: "/static/test-video/10second-demo.mp4",
        relativeVideoInfo: "",
        relativeCoverImagePath: "",
        absoluteVideoPath: "",
        absoluteVideoInfo: "",
        absoluteCoverImagePath: "",
        // 自动化测试
        videoInfoForTest: null as UTSJSONObject | null
      }
    },
    onReady() {
      // #ifndef MP
      uni.getVideoInfo({
        src: this.relativeVideoPath,
        success: (res) => {
          console.log("getVideoInfo success", JSON.stringify(res));
          this.relativeVideoInfo = `视频画面方向: ${res.orientation}\n视频格式: ${res.type}\n视频长度: ${res.duration}s\n视频大小: ${res.size}KB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n视频帧率: ${res.fps}fps\n视频码率: ${res.bitrate}kbps`;
          // #ifdef APP-ANDROID || APP-IOS
          this.relativeVideoInfo = this.relativeVideoInfo + `\n视频字节大小: ${res.byteSize}B\n视频首帧图片路径: ${res.thumbTempFilePath}`
          if(res.thumbTempFilePath != null) {
          this.relativeCoverImagePath = res.thumbTempFilePath!;
          }
          // #endif

        },
        fail: (err) => {
          uni.showModal({
            title: "获取视频信息失败",
            content: JSON.stringify(err),
            showCancel: false
          });
        }
      });
      // #endif
    },
    methods: {
      chooseVideo() {
        uni.chooseVideo({
          compressed: false,
          success: (res) => {
            this.absoluteVideoPath = res.tempFilePath;
            uni.getVideoInfo({
              src: res.tempFilePath,
              success: (_res) => {
                console.log("getVideoInfo success", JSON.stringify(_res));
                this.absoluteVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${_res.size}KB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
                // #ifdef APP-ANDROID || APP-IOS
                this.absoluteVideoInfo = this.absoluteVideoInfo + `\n视频字节大小: ${_res.byteSize}B\n视频首帧图片路径: ${_res.thumbTempFilePath}`
                if(_res.thumbTempFilePath != null) {
                this.absoluteCoverImagePath = _res.thumbTempFilePath!
                }
                // #endif
              },
              fail: (err) => {
                uni.showModal({
                  title: "获取视频信息失败",
                  content: JSON.stringify(err),
                  showCancel: false
                });
              }
            });
          }
        });
      },
      testGetVideoInfo() {
        uni.getVideoInfo({
          src: '/static/test-video/10second-demo.mp4',
          success: (res) => {
            this.videoInfoForTest = {
              "orientation": res.orientation,
              "type": res.type,
              "duration": Math.trunc(res.duration),
              "size": res.size,
              "width": res.width,
              "height": res.height,
              "fps": res.fps,
              "bitrate": res.bitrate
            };
          },
          fail: (_) => {
            this.videoInfoForTest = null;
          }
        });
      }
    }
  }
</script>

<style>
  .video {
    width: 100%;
  }

  .margin-top-10 {
    margin-top: 10px;
  }
</style>