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