live-player

解释：实时视频播放

只针对直播答题、直播服务类目开放。需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。

属性说明：

说明:

• live-player 默认宽度 300px、高度 225px；
• 从基础库版本1.12.0开始支持事件捕获、冒泡。
  状态码

网络状态数据：

示例：

在开发者工具中预览效果

.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">点击跳转</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 = swan.createLivePlayerContext('myLive');
    },
    statechange(e) {
            swan.showToast({
            title: '播放状态变化 statechange' + JSON.stringify(e)
        });
    },
    netstatus(e) {
        swan.showToast({
            title: '网络状态变化 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) {
        swan.navigateTo({
            url: 'pages/live-player-new/live-player-new'
        });
    }
});

导航地图