AnimationVideo.play

2020-08-26 16:34 更新

解釋:播放

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

方法參數(shù)

示例 

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


圖片示例

代碼示例

<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)畫</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() {
            // 創(chuàng)建動(dòng)畫組件實(shí)例
            this.myAnimationVideo = swan.createAnimationVideo('myAnimationVideo');
        },
        changeStatus() {
            let action = this.data.status;
            let status = action  === '暫停' ? '播放' : '暫停';
            status === '暫停' ? this.myAnimationVideo.play() : this.myAnimationVideo.pause();
            this.setData({status});
        },
        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)