Transparent Video

createAnimationVideoContext

TIP

The API usage is as follows: AnimationVideoContext wx.createAnimationVideoContext(string id, Object this)

• Functional description: Create the animation-video context AnimationVideoContext object

• Parameters and descriptions:

  • string id，<animation-video> Component id
  • Object this，Under custom components, this of the current component instance is the <animation-video> component in the component

• Return value: AnimationVideoContext

AnimationVideoContext

• Functional description: AnimationVideoContext instance, which can be accessed through wx.createAnimationVideoContext obtain.

AnimationVideoContext through id and a <animation-video> Component binding, operation corresponding <animation-video> Component

• Sample code:

<view class="wrap">
  <view class="card-area">
    <view class="top-description border-bottom">
        <view>Feature</view>
        <view>play pause seek</view>
    </view>
    <view class="video-area">
        <animation-video
            id="myAnimationVideo"
            path="{{leftAlphaSrcPath}}"
            loop="{{loop}}"
            resource-width="800"
            resource-height="400"
            canvas-style="width:200px;height:200px"
            autoplay="{{autoplay}}"
            bindstarted="onStarted"
            bindended="onEnded"
        ></animation-video>
    </view>
    <button bindtap="play">
      Play
    </button>
    <button bindtap="pause">
      Pause
    </button>
    <button bindtap="seek">
      Navigate to the 2-second mark of the animation.
    </button>
  </view>
</view>

Page({
  onLoad() {
    this.createCtx();
  },
  createCtx() {
    this.myAnimationVideo = wx.createAnimationVideoContext('my-video');
  },
  play() {
    this.myAnimationVideo?.play();
  },
  pause() {
    this.myAnimationVideo?.pause();
  },
  seek() {
    this.myAnimationVideo?.seek(2);
  },
})

.play

TIP

The API usage is as follows: AnimationVideoContext.play()

• Functional description: Play the video

.pause

TIP

The API usage is as follows: AnimationVideoContext.pause()

• Functional description: Pause the video

.seek

TIP

The API usage is as follows: AnimationVideoContext.seek(number position)

• Functional description: Jump to the specified position
• Parameters and descriptions: number position, The position to jump to, unit: s.