tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Program DevelopmentAPIMediaTransparent Video
Transparent Video
Download PDF
Last updated: 2025-03-25 18:15:55
Transparent Video
Last updated: 2025-03-25 18:15:55
Download PDF

createAnimationVideoContext

This API is used via AnimationVideoContext wx.createAnimationVideo(string id, Object this)
Feature Description: Creates an AnimationVideoContext object.
Parameter and Description:
string id: The id of the <animation-video> component.
Object this, "this" of the current component instance under custom components, used to operate the <animation-video> component within.
Return Value: AnimationVideoContext.

AnimationVideoContext

Feature Description: AnimationVideoContext instance, which can be obtained through wx.createAnimationVideo.
AnimationVideoContext is bound to an <animation-video> component through its id, thereby manipulating the 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

This method is used via AnimationVideoContext.play().
Feature Description: Plays the video.

.pause

This method is used via AnimationVideoContext.pause().
Feature Description: Pauses the video.

.seek

This method is used via AnimationVideoContext.seek(number position).
Feature Description: Redirects to the specified position.
Parameter and Description: number position, the position to redirect to, unit: seconds.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon