百度智能小程序組件 媒體組件

audio

解釋：音頻

屬性說明：

MediaError.code

示例：

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls="true" bind:error="error" bind:play="audioPlay" bind:pause="audioPause" bind:timeupdate="timeupdate" bind:ended="audioEnded"></audio>

Page({
    data: {
        poster: 'http://c.hiphotos.baidu.com/super/pic/item/8b13632762d0f703e34c0f6304fa513d2797c597.jpg',
        name: '演員',
        author: '薛之謙',
        src: 'http://vd3.bdstatic.com/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3'
    },
    error: function (e) {
        console.log(e);
    },
    audioPlay: function (e) {
        console.log('audio play');
        swan.showToast({
            title: '音頻開始播放',
            duration: 1000
        });
    },
    audioPause: function (e) {
        console.log('audio pause');
        swan.showToast({
            title: '音頻暫停',
            duration: 1000
        });
    },
    audioEnded: function () {
        console.log('audio ended');
        swan.showToast({
            title: '音頻播放完',
            duration: 1000
        });
    },
    timeupdate: function () {
        console.log('audio update');
    }
});
    

image

解釋：圖片

屬性說明：

image 組件默認(rèn)寬度 300px、高度 225px。

mode 有效值： 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

示例：

<view class="wrap">
    <view>
        <text>image</text>
        <text>圖片</text>
    </view>
    <view>
        <view s-for="item in test">
            <view>{{item.text}}</view>
            <view>
                <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        test: [
            {
                mode: 'scaleToFill',
                text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片完全適應(yīng)'
            },
            {
                mode: 'aspectFit',
                text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來'
            },
            {
                mode: 'aspectFill',
                text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來'
            },
            {
                mode: 'top',
                text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域' 
            },
            {     
                mode: 'bottom',
                text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'
            },
            {
                mode: 'center',
                text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'
            },
            {
                mode: 'left',
                text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'
            },
            {
                mode: 'right',
                text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'
            },
            {
                mode: 'top left',
                text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域' 
            },
            {
                mode: 'top right',
                text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'
            },
            {
                mode: 'bottom left',
                text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'
            },
            {
                mode: 'bottom right',
                text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'
            }
        ],
        src: '../../images/image8.jpg'
    }
});

scaleToFill不保持縱橫比縮放圖片，使圖片完全適應(yīng)：

aspectFit保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來

aspectFill保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來

top不縮放圖片，只顯示圖片的頂部區(qū)域

bottom不縮放圖片，只顯示圖片的底部區(qū)域

center不縮放圖片，只顯示圖片的中間區(qū)域

left不縮放圖片，只顯示圖片的左邊區(qū)域

right不縮放圖片，只顯示圖片的右邊邊區(qū)域

top left不縮放圖片，只顯示圖片的左上邊區(qū)域

top right不縮放圖片，只顯示圖片的右上邊區(qū)域

bottom left不縮放圖片，只顯示圖片的左下邊區(qū)域

bottom right不縮放圖片，只顯示圖片的右下邊區(qū)域

video

解釋：視頻

屬性說明：

<video /> 默認(rèn)寬度 300px、高度 225px

示例：

<view class="section">
    <video id="myde" src="{{src}}" controls bindplay="play" bindpause="pause" bindfullscreenchange="fullscreen" bindended="ended" autoplay="{{autoplay}}" muted="{{muted}}"></video>
</view>
<view class="btn-area">
    <button bindtap="next">切換視頻地址</button>
</view>
<view class="btn-area">
    <button bindtap="setmuted">設(shè)置靜音</button>
</view>
<view class="btn-area">
    <button bindtap="setautoplay">切換 autoplay </button>
</view>

Page({
    data: {
        current: 0,
        srcList: ['https://vd3.bdstatic.com/mda-ia8e6q3g23py8qdh/hd/mda-ia8e6q3g23py8qdh.mp4?playlist=%5B%22hd%22%5D&auth_key=1521549485-0-0-d5d042ba3555b2d23909d16a82916ebc&bcevod_channel=searchbox_feed&pd=share', 'https://vd3.bdstatic.com/mda-ib0u8x1bvaf00qa8/mda-ib0u8x1bvaf00qa8.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D'],
        src: 'https://vd3.bdstatic.com/mda-ia8e6q3g23py8qdh/hd/mda-ia8e6q3g23py8qdh.mp4?playlist=%5B%22hd%22%5D&auth_key=1521549485-0-0-d5d042ba3555b2d23909d16a82916ebc&bcevod_channel=searchbox_feed&pd=share',
        loop: false,
        muted: false,
        autoplay: false
    },
    play: function (e) {
        console.log('play!');
    },
    pause: function (e) {
        console.log('pause');
    },
    fullscreen: function (e) {
        console.log('fullscreenchange!! 參數(shù)是' + JSON.stringify(e));
    },
    ended: function (e) {
        console.log('ended');
        this.next();
    },
    next: function (e) {
        let list = this.getData('srcList');
        let current = (this.getData('current') + 1) % list.length;
        this.setData('src', list[current]);
        this.setData('current', current);
    },
    setloop: function (e) {
        this.setData('loop', !this.getData('loop'));
    },
    setmuted: function (e) {
        this.setData('muted', !this.getData('muted'));
    },
    setautoplay: function (e) {
        this.setData('autoplay', !this.getData('autoplay'));
    }
});

camera

解釋：相機(jī)

屬性說明：

1. camera 組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過 z-index 控制層級(jí)?？墒褂?cover-view cover-image 覆蓋在上面。

2. 同一頁面只能插入一個(gè) camera 組件。

3. 請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 組件。

示例：

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bind:tap="takePhoto">拍照</button>
<view>預(yù)覽</view>
<image mode="widthFix" src="{{src}}"></image>

Page({
    takePhoto() {
        const ctx = swan.createCameraContext();
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                    src: res.tempImagePath
                })
            }
        });
    },
    error(e) {
        console.log(e.detail);
    }
})

live-player

解釋：實(shí)時(shí)視頻播放

屬性說明：

Tips:live-player 默認(rèn)寬度 300px、高度 225px。

狀態(tài)碼

網(wǎng)絡(luò)狀態(tài)數(shù)據(jù)：

示例：

.wrap {
    position: relative;
    top: 10px;
    width: 100%;
}
.item {
    display: block;
    margin: 6px 22.67px;
    border-radius: 4px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
    color: #333;
    border: 1px solid #333;
    background-color: #fff;
}

<live-player id="myLive" src="{{src}}" autoplay="{{autoplay}}" object-fit="{{objectFit}}" background-mute="{{backgroundMute}}" muted="{{muted}}" min-cache="{{minCache}}" max-cache="{{maxCache}}" bind:statechange="statechange" bind:netstatus="netstatus"></live-player>
<div class="wrap">
    <view class="item" bind:tap="livePlay">開始播放 play</view>
    <view class="item" bind:tap="liveStop">停止播放 stop</view>
    <view class="item" bind:tap="liveMute">靜音</view>
    <view class="item" bind:tap="changeSrc">更換src</view>
    <view class="item" bind:tap="backgroundMute">后臺(tái)靜音</view>
    <view class="item" bind:tap="objectFit">object-fit改變</view>
    <view class="item" bind:tap="oneItemClick">點(diǎn)擊跳轉(zhuǎn)</view>
</div>

Page({
    data: {
        cur: 0,
        src: 'http://livebd.quanmin.tv/live/1931315320.m3u8',
        srcList: [
            'http://livebd.quanmin.tv/live/1931315320.m3u8',
            'http://livebd.quanmin.tv/live/462099.m3u8',
        ],
        objectFit: 'contain',
        orientation: 'vertical',
        minCache: 1,
        maxCache: 3,
        muted: false,
        backgroundMute: false
    },
    onReady(e) {
        this.ctx = window.swan.createLivePlayerContext('myLive');
    },
    statechange(e) {
            window.swan.showToast({
            title: '播放狀態(tài)變化 statechange' + JSON.stringify(e)
        });
    },
    netstatus(e) {
        window.swan.showToast({
            title: '網(wǎng)絡(luò)狀態(tài)變化 netstatus' + JSON.stringify(e)
        });
    },
    livePlay(e) {
        this.ctx.play();
    },
    objectFit(e) {
        this.setData('objectFit', this.getData('objectFit') === 'contain' ? 'fillCrop' : 'contain');
    },
    liveStop(e) {
        this.ctx.stop();
    },
    liveMute(e) {
        let muted = !this.getData('muted');
        this.setData('muted', muted);
    },
    changeSrc(e) {
        let srcList = this.getData('srcList');
        let cur = (this.getData('cur') + 1) % srcList.length;
        this.setData('src', srcList[cur]);
        this.setData('cur', cur);
    },
    backgroundMute(e) {
        this.setData('backgroundMute', !this.getData('backgroundMute'));
    },
    oneItemClick(e) {
        window.swan.navigateTo({
            url: 'pages/live-player-new/live-player-new'
        });
    }
});