createAnimationVideoContext
Parameter and Description:
Object this, "this" of the current component instance under custom components, used to operate the <animation-video> component within.
AnimationVideoContext
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?