百度智能小程序 AnimationVideo

2020-09-05 14:19 更新

解釋: swan.createAnimationVideo 的返回值,相關(guān)組件 animation-video 。

Web 態(tài)說(shuō)明:詳見(jiàn) animation-video 組件 Web 態(tài)說(shuō)明。

屬性說(shuō)明

屬性名 說(shuō)明
AnimationVideo.play 播放
AnimationVideo.pause 暫停
AnimationVideo.seek 跳轉(zhuǎn)到指定位置(單位:s)

示例 

在開(kāi)發(fā)者工具中打開(kāi)



圖片示例

代碼示例

<view class="wrap">
    <view class="card-area">
        <view class="video-area">
            <animation-video
                id="myAnimationVideo"
                path="{{path}}"
                loop="{{loop}}"
                resource-width="800"
                resource-height="400"
                canvas-style="width:200px;height:200px"
                autoplay="{{autoplay}}"
                bindstarted="started"
                bindended="ended"
            ></animation-video>
        </view>
        <button class="btn" type="primary" bindtap="changeStatus">{{status}}動(dòng)畫(huà)</button>
        <button class="btn" type="primary" bindtap="seek">跳轉(zhuǎn)到動(dòng)畫(huà)2S處</button>
    </view>
</view>
Page({
    data: {
        loop: true,
        path: 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-1/1577964961344/003e2f0dcd81.mp4',
        status: '暫停',
        autoplay: true
    },
    onLoad() {
        this.myAnimationVideo = swan.createAnimationVideo('myAnimationVideo');
    },
    changeStatus() {
        let action = this.data.status;
        let status = action  === '暫停' ? '播放' : '暫停';
        status === '暫停' ? this.myAnimationVideo.play() : this.myAnimationVideo.pause();
        this.setData({status});
    },
    seek() {
        this.myAnimationVideo.seek(2);
    },
    started(e) {
        console.log('animationVideo', e.type);
    },
    ended(e) {
        console.log('animationVideo', e.type);
    }
});
.video-area {
    height: 2.18rem;
    background: #343434;
    display: flex;
    align-items: center;
    justify-content: center;
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)