tencent cloud

Feedback

Transparent Video

Last updated: 2024-12-19 16:11:37

    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.
    Contact Us

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

    Technical Support

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

    7x24 Phone Support