Video

API Declaration

Add the following configuration to the features attribute in the manifest.json file:

{"name": "hap.io.Video"}

Module Import

Add the following configuration to the script element on the page where the API will be called:

import Video from '@hap.io.Video'

Application Scope

Definition

[h2]Task Instance Creation (1072+)

Description

Creates a video compression task instance. A video can be compressed by using the compression API.

Parameters

Returns

Sample code

var mVideoTask = new Video({
  // For details about supported URI types, please refer to https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-filestructure.
  // The URI is obtained from media.takeVideo or media.pickVideo.
  uri:'internal://xxx'
})

[h2]compressVideo(OBJECT) (1072+)

Description

Compresses a video.

Parameters

Parameters returned in success

Result codes returned in fail

Sample code

mVideoTask.compressVideo({
  success: function (res) {
    console.log(`success: ${res.uri}`)
  },
  fail: function (data, code) {
    console.log(`fail code:${code}, msg:${data}`)
  },
})

[h2] onprogressupdate(OBJECT) (1072+)

Description

Listens to the video compression progress.

Parameters

Returns

Sample code

mVideoTask.onprogressupdate = function(res) {
  console.log(`current progress: ${res.progress}`)
}

[h2]abort(OBJECT) (1072+)

Description

Interrupts an ongoing compression task and releases resources.

Sample code

mVideoTask.abort()
mVideoTask = null

[h2]Video.getVideoInfo(OBJECT) (1072+)

Description

Obtains video information.

Parameters

Parameters returned in success

Sample code

Video.getVideoInfo({
  success: function (data) {
   console.log(`success: ${data.size}`)
  },
  fail: function() {
  }
})

[h2]Video.getVideoThumbnail(OBJECT) (1072+)

Description

Obtains the video thumbnail.

Parameters

Parameters returned in success

Sample code

Video.getVideoThumbnail({
  success: function (data) {
    console.log(`success: ${data.uri}`)
  },
  fail: function() {
  }
})

Demo

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <div class="case-title">
      <text class="title">Video</text>
    </div>
    <div class="mlr-container">
      <video src="{{videoUri}}" poster="{{posterUri}}" class="video"></video>
    </div>
    <div class="mlr-container mt-btn">
      <input onclick="takeVideo" type="button" value="takeVideo" class="btn-blue" />
    </div>
    <div class="mlr-container mt-btn">
      <input onclick="pickVideo" type="button" value="pickVideo" class="btn-blue" />
    </div>
    <div class="mlr-container mt-btn">
      <div class="btn-gray" if="{{videoUri && isOriginInfoGetted }}" onclick="compressVideo">
        <text class="color-a">compressVideo</text>
      </div>
    </div>
    <!-- Before compression -->
    <div class="case-title">
      <text class="title">beforeCompress</text>
    </div>
    <div class="info-container">
      <div class="info-item border-bottom-1">
        <text class="title color-primary">size</text>
        <text class="result">{{isOriginInfoGetted ? originInfo.size : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">width</text>
        <text class="result">{{isOriginInfoGetted ? originInfo.width : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">height</text>
        <text class="result">{{isOriginInfoGetted ? originInfo.height : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">bitrate</text>
        <text class="result">{{isOriginInfoGetted ? originInfo.bitrate : noGained}}</text>
      </div>
      <div class="info-item">
        <text class="title color-primary">framerate</text>
        <text class="result">{{isOriginInfoGetted ? originInfo.framerate : noGained}}</text>
      </div>
    </div>
    <!-- After compression -->
    <div class="case-title">
      <text class="title">afterCompress</text>
    </div>
    <div class="info-container">
      <div class="info-item border-bottom-1">
        <text class="title color-primary">size</text>
        <text class="result">{{isCompressInfoGetted ? compressInfo.size : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">width</text>
        <text class="result">{{isCompressInfoGetted ? compressInfo.width : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">height</text>
        <text class="result">{{isCompressInfoGetted ? compressInfo.height : noGained}}</text>
      </div>
      <div class="info-item border-bottom-1">
        <text class="title color-primary">bitrate</text>
        <text class="result">{{isCompressInfoGetted ? compressInfo.bitrate : noGained}}</text>
      </div>
      <div class="info-item">
        <text class="title color-primary">framerate</text>
        <text class="result">{{isCompressInfoGetted ? compressInfo.framerate : noGained}}</text>
      </div>
    </div>
  </div>
</template>


<style >
  .btn-blue {
    background-color: #0a59f7;
    width: 100%;
    height: 80px;
    border-radius: 40px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
  }
  .color-a {
    color: #0a59f7;
  }
  .container {
    flex-direction: column;
    background-color: #F1F3F5;
    padding-bottom: 50px;
  }
  .case-title {
    margin-left: 32px;
    margin-right: 32px;
    margin-bottom: 20px;
    flex-direction: column;
    margin-top: 40px;
  }

  .case-title .title {
    color: rgba(0, 0, 0, 0.6);
    font-size: 28px;
    font-weight: 500;
  }
  .mlr-container {
    margin-right: 32px;
    margin-left: 32px;
  }
  .mt-btn {
    margin-top: 32px;
  }
  .video {
    width: 100%;
    height: 360px;
  }
  .btn-gray {
    background-color: rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 80px;
    border-radius: 40px;
    align-items: center;
    justify-content: center;
  }
  .case-title {
    margin-left: 32px;
    margin-right: 32px;
    margin-bottom: 20px;
    flex-direction: column;
  }
  .case-title .title {
    color: #232325;
    font-size: 28px;
    font-weight: 500;
  }
  .info-container {
    margin-left: 32px;
    margin-right: 32px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #fff;
    border-radius: 32px;
    flex-direction: column;
  }
  .info-container .info-item {
    height: 120px;
    border-bottom-color: rgba(0, 0, 0, 0.05);
  }
  .info-container .info-item .title {
    flex-shrink: 0;
    font-size: 32px;
    color: rgba(0, 0, 0, 0.9);
  }
  .info-container .info-item .result {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
    color: #999;
  }
  .case-title {
    margin-left: 32px;
    margin-right: 32px;
    margin-bottom: 20px;
    flex-direction: column;
  }
  .case-title .title {
    color: #232325;
    font-size: 28px;
    font-weight: 500;
  }
</style>

<script>

  import media from '@system.media';
  import Video from '@hap.io.Video';
  import prompt from '@system.prompt';
  module.exports = {
    public: {
      videoUri: '',
      posterUri: '',
      originInfo: {
        size: 0,
        width: 0,
        height: 0,
        bitrate: 0,
        framerate: 0,
      },
      compressInfo: {
        size: 0,
        width: 0,
        height: 0,
        bitrate: 0,
        framerate: 0,
      },
      isOriginInfoGetted: false,
      isCompressInfoGetted: false,
      noGained: "noGained"
    },
    onInit: function () {
      this.$page.setTitleBar({ text: this.$t('Video') });
    },
    pickVideo() {
      let that = this;
      media.pickVideo({
        success: function (data) {
          console.log("handling success: " + data.uri);
          that.videoUri = data.uri;
          Video.getVideoThumbnail({
            uri: data.uri,
            success: function ({ uri }) {
              that.posterUri = uri;
            }
          });
          Video.getVideoInfo({
            uri: data.uri,
            success: function (videoInfo) {
              that.isOriginInfoGetted = true;
              that.originInfo = {
                size: videoInfo.size,
                width: videoInfo.width,
                bitrate: videoInfo.bitrate,
                framerate: videoInfo.framerate,
                height: videoInfo.height,
              }
            }
          })
        },
        fail: function (data, code) {
          console.log("handling fail, code=" + code);
        }
      })

    },
    takeVideo() {
      let that = this;
      media.takeVideo({
        success: function (data) {
          console.log("data.uri " + data.uri);
          that.videoUri = data.uri;
          Video.getVideoThumbnail({
            uri: data.uri,
            success: function ({ uri }) {
              that.posterUri = uri;
            }
          });
          Video.getVideoInfo({
            uri: data.uri,
            success: function (videoInfo) {
              that.isOriginInfoGetted = true;
              that.originInfo = {
                size: videoInfo.size,
                width: videoInfo.width,
                bitrate: videoInfo.bitrate,
                framerate: videoInfo.framerate,
                height: videoInfo.height,
              }
            }
          })
        }
      })
    },

    compressVideo() {
      let that = this;
      prompt.showLoading({
        message: this.$t('loading1'),
        loadingColor: '#0faeff',
        mask: true
      })
      console.log(" this.videoUri:" + this.videoUri);
      console.log(" this.originInfo.width / 2:" + this.originInfo.width / 2);
      console.log("  this.originInfo.height / 2:" + this.originInfo.height / 2);

      let videoTask = new Video({
        uri: this.videoUri,
        width: this.originInfo.width / 2,
        height: this.originInfo.height / 2
      });
      console.log("  videoTask.compressVideo ready");
      videoTask.compressVideo({
        success: function ({ uri }) {
          console.log("compressVideo uri" + uri);
          console.log("  videoTask.compressVideo go");
          Video.getVideoInfo({
            uri: uri,
            success: function (videoInfo) {
              that.isCompressInfoGetted = true;
              that.compressInfo = {
                size: videoInfo.size,
                width: videoInfo.width,
                bitrate: videoInfo.bitrate,
                framerate: videoInfo.framerate,
                height: videoInfo.height,
              }
            }
          })
        },
        fail: function (data, code) {
          console.log("handling fail, code=" + code);
           console.log("handling fail, data=" + data);
        },
        complete: function ({ uri }) {
          console.log("complete compressVideo uri" + uri);
        }


      });

      videoTask.onprogressupdate = function ({ progress }) {
        console.log(progress)
        if (progress >= 100) {
          prompt.hideLoading();
        }
      };
    }
  }
</script>

The following figure shows the final effect.