透明視頻

createAnimationVideoContext

TIP

該API使用方法為： AnimationVideoContext wx.createAnimationVideoContext(string id, Object this)

• 功能說明： 創建animation-video上下文AnimationVideoContext對象

• 參數及說明：

  • string id，<animation-video> 組件的id
  • Object this，在自定義組件下，當前組件實例的this，以組件內<animation-video>組件

• 返回值： AnimationVideoContext

AnimationVideoContext

• 功能說明： AnimationVideoContext實例，可通過 wx.createAnimationVideoContext 獲取。

AnimationVideoContext通過id跟一個 <animation-video> 組件綁定，操作對應的 <animation-video> 組件

• 示例代碼：

<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

該API使用方法為： AnimationVideoContext.play()

• 功能說明： 播放視頻

.pause

TIP

該API使用方法為： AnimationVideoContext.pause()

• 功能說明： 暫停視頻

.seek

TIP

該API使用方法為： AnimationVideoContext.seek(number position)

• 功能說明： 跳轉到指定位置
• 參數及說明： number position, 跳轉到的位置，單位： s。