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

audio

---

解釋：音頻

屬性說明：

屬性名	類型	默認值	說明
id	String		audio 組件的唯一標識符
src	String		要播放音頻的資源地址
loop	Boolean	false	是否循環(huán)播放
controls	Boolean	false	是否顯示默認控件
poster	String		默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設(shè)置 poster 無效
name	String	未知音頻	默認控件上的音頻名字，如果 controls 屬性值為 false 則設(shè)置 name 無效
author	String	未知作者	默認控件上的作者名字，如果 controls 屬性值為 false 則設(shè)置 author 無效
binderror	EventHandle		當發(fā)生錯誤時觸發(fā) error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		當開始/繼續(xù)播放時觸發(fā)play事件
bindpause	EventHandle		當暫停播放時觸發(fā) pause 事件
bindtimeupdate	EventHandle		當播放進度改變時觸發(fā) timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		當播放到末尾時觸發(fā) ended 事件

MediaError.code

返回錯誤碼	描述
1	獲取資源過程被用戶終止
2	當下載時發(fā)生錯誤
3	當解碼時發(fā)生錯誤
4	不支持音頻

示例：

<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

---

解釋：圖片

屬性說明：

屬性名	類型	默認值	說明
src	String		圖片資源地址
mode	String	scaleToFill	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對 scroll-view 下的 image 有效
binderror	HandleEvent		當錯誤發(fā)生時，發(fā)布到 AppService 的事件名，事件對象 event.detail = {errMsg: ‘something wrong’}
bindload	HandleEvent		當圖片載入完畢時，發(fā)布到 AppService 的事件名，事件對象 event.detail = {height:’圖片高度px’, width:’圖片寬度px’}

image 組件默認寬度 300px、高度 225px。

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

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放	aspectFill	保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
縮放	widthFix	寬度不變，高度自動變化，保持原圖寬高比不變
裁剪	top	不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪	bottom	不縮放圖片，只顯示圖片的底部區(qū)域
裁剪	center	不縮放圖片，只顯示圖片的中間區(qū)域
裁剪	left	不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪	right	不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪	top left	不縮放圖片，只顯示圖片的左上區(qū)域
裁剪	top right	不縮放圖片，只顯示圖片的右上區(qū)域
裁剪	bottom left	不縮放圖片，只顯示圖片的左下區(qū)域
裁剪	bottom right	不縮放圖片，只顯示圖片的右下區(qū)域

示例：

<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：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來'
            },
            {
                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保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來

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

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

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

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

 

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

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

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

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

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

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

video

---

解釋：視頻

屬性說明：

屬性名	類型	默認值	說明
src	String		視頻的資源地址
initial-time	Number		指定視頻初始播放位置
duration	Number		指定視頻時長
controls	Boolean	true	是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）
autoplay	Boolean	true	是否自動播放
loop	Boolean	true	是否循環(huán)播放
muted	Boolean	true	是否靜音播放
objectFit	String	contain	當視頻大小與 video 容器大小不一致時，視頻的表現(xiàn)形式。contain ：包含，fill ：填充，cover ：覆蓋
poster	String		視頻封面的圖片網(wǎng)絡(luò)資源地址
bindplay	EventHandle		當開始/繼續(xù)播放時觸發(fā) play 事件
bindpause	EventHandle		當暫停播放時觸發(fā) pause 事件
bindended	EventHandle		當播放到末尾時觸發(fā) ended 事件
bindtimeupdate	EventHandle		播放進度變化時觸發(fā)，event.detail = {currentTime, duration} 。
bindfullscreenchange	EventHandle		當視頻進入和退出全屏是觸發(fā)，event.detail = {fullScreen, direction}，direction 取為 vertical 或 horizontal

<video /> 默認寬度 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

---

解釋：相機

屬性說明：

屬性名	類型	默認值	說明
device-position	String	back	前置或后置，值為front, back
flash	String	auto	閃光燈，值為auto, on, off
bindstop	EventHandle		攝像頭在非正常終止時觸發(fā)，如退出后臺等情況
binderror	EventHandle		用戶不允許使用攝像頭時觸發(fā)

Tips:

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

2. 同一頁面只能插入一個 camera 組件。

3. 請勿在 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

---

解釋：實時視頻播放

屬性說明：

屬性名	類型	默認值	說明
id	String		live-player 屬性的唯一標志符
src	String		音視頻地址。目前僅支持 m3u8 格式
autoplay	Boolean	false	自動播放
muted	Boolean	false	是否靜音
object-fit	String	contain	填充模式，可選值:contain、fillCrop
background-mute	Boolean	false	進入后臺時是否靜音
min-cache	Number	1	最小緩沖區(qū)，單位s
max-cache	Number	3	最大緩沖區(qū)，單位s
bindstatechange	EventHandle		播放狀態(tài)變化事件，detail = {code}
bindnetstatus	EventHandle		網(wǎng)絡(luò)狀態(tài)通知，detail = {info}

Tips:live-player 默認寬度 300px、高度 225px。

狀態(tài)碼

代碼	說明
2001	已經(jīng)連接服務(wù)器
2002	已經(jīng)連接服務(wù)器,開始拉流
2003	網(wǎng)絡(luò)接收到首個視頻數(shù)據(jù)包(IDR)
2004	視頻播放開始
2005	視頻播放進度
2006	視頻播放結(jié)束
2007	視頻播放Loading
2008	解碼器啟動
2009	視頻分辨率改變
-2301	網(wǎng)絡(luò)斷連，且經(jīng)多次重連搶救無效，更多重試請自行重啟播放
-2302	獲取加速拉流地址失敗
2101	當前視頻幀解碼失敗
2102	當前音頻幀解碼失敗
2103	網(wǎng)絡(luò)斷連, 已啟動自動重連
2104	網(wǎng)絡(luò)來包不穩(wěn)：可能是下行帶寬不足，或由于主播端出流不均勻
2105	當前視頻播放出現(xiàn)卡頓
2106	硬解啟動失敗，采用軟解
2107	當前視頻幀不連續(xù)，可能丟幀
2108	當前流硬解第一個I幀失敗，SDK自動切軟解
3001	RTMP -DNS解析失敗
3002	RTMP服務(wù)器連接失敗
3003	RTMP服務(wù)器握手失敗
3005	RTMP 讀/寫失敗

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

鍵名	說明
videoBitrate	當前視頻編/碼器輸出的比特率，單位 kbps
audioBitrate	當前音頻編/碼器輸出的比特率，單位 kbps
videoFPS	當前視頻幀率
videoGOP	當前視頻 GOP,也就是每兩個關(guān)鍵幀(I幀)間隔時長，單位 s (安卓不支持該鍵名)
netSpeed	當前的發(fā)送/接收速度
netJitter	網(wǎng)絡(luò)抖動情況，抖動越大，網(wǎng)絡(luò)越不穩(wěn)定 (安卓不支持該鍵名)
videoWidth	視頻畫面的寬度
videoHeight	視頻畫面的高度

示例：

.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">后臺靜音</view>
    <view class="item" bind:tap="objectFit">object-fit改變</view>
    <view class="item" bind:tap="oneItemClick">點擊跳轉(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'
        });
    }
});