webUrl: https://qft12m.smartapps.cn/component/live-player/live-player

title: live-player 实时视频播放器 header: develop nav: component sidebar: media_live-player

webUrl: https://qft12m.smartapps.cn/component/live-player/live-player

解释：实时视频播放器（v3.140.1 起支持同层渲染）。只针对直播答题、直播服务类目开放。需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。

属性说明

orientation 有效值

object-fit 有效值

主流格式支持

主流编码格式支持

状态码

网络状态数据

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

在开发者工具中预览效果

:::codeTab

<view class="live-play">
    <live-player id="myLive"
                 src="{{src}}"
                 autoplay="{{autoplay}}"
                 muted="{{muted}}"
                 orientation="vertical"
                 object-fit="{{objectFit}}"
                 background-mute="{{backgroundMute}}"
                 min-cache="{{minCache}}"
                 max-cache="{{maxCache}}"
                 bind:statechange="statechange"
                 bind:netstatus="netstatus"
                 bindfullscreenchange>
    </live-player>
    <div class="section">
        <button type="primary" bind:tap="livePlay">开始播放 play</button>
        <button type="primary" bind:tap="liveStop">停止播放 stop</button>
        <button type="primary" bind:tap="liveMute">{{muted? '': '不'}}静音</button>
        <button type="primary" bind:tap="backgroundMute">进入后台静音</button>
        <button type="primary" bind:tap="objectFit">object-fit改变为{{objectFit}}</button>
    </div>
</view>

Page({
    data: {
        cur: 0,
        autoplay: false,
        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',
        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'
        ],
        objectFit: 'contain',
        orientation: 'vertical',
        minCache: 1,
        maxCache: 3,
        muted: false,
        backgroundMute: false
    },
    onReady(e) {
        this.ctx = swan.createLivePlayerContext('myLive');
    },
    statechange(e) {
        console.log('播放状态变化 statechange' + JSON.stringify(e))
    },
    netstatus(e) {
        console.log('网络状态变化 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) {
        this.setData({
            muted: true
        });
    },
    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': true
        });
    },
});

:::

Bug & Tip

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

Web 态 Tip

Tip1：在部分浏览器下，视频资源无法自动播放的解决方案

案例分析： 出于用户体验、节省流量等原因，iOS 的 Safari、版本号 66 及以上的 Chrome、以及大部分国产移动浏览器禁止视频在非静音状态下自动播放。因此，Web 态针对 live-player 组件中 autoplay 属性设置为 true 后做了如下处理：

• 对于 QQ、Android 微信、 QQ 浏览器等基于 X5 内核的平台，Web 态下设置的 autoplay = true 不生效，页面进入时，播放器上显示播放按钮供用户主动点击触发播放。
• 对于其他非 X5 内核的平台，为保证页面进入时可自动播放，会默认关闭声音播放，并显示“取消静音”按钮，供用户主动开启声音。

由于浏览器种类众多，如出现自动播放相关新问题，请将案例反馈给我们，我们将统一记录并反馈进展。

Tip2：视频类资源地址必须有文件扩展名（即文件后缀）

由于浏览器无法解析资源格式。因此对于视频类资源，应在地址中通过后缀名显式声明资源格式，否则可能会导致视频无法正常播放：

• Web 态 live-player 组件目前支持 mp4、mov、m4v、ogg、m3u8 等格式，参见上述“主流格式支持”小节。
• 当 live-player 组件的 src 属性值没有文件扩展名，视频资源会被按照 mp4 格式来进行解码播放。

Tip3：在部分浏览器下，实时视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案

案例分析： 微信、百度 APP、UC 等浏览器实现了自身的播放器控件，劫持了默认内核提供的播放器样式和逻辑，从而使得基于 H5 video 实现的 Web 态 live-player 组件出现了以下问题：

• 在 Android 系统的微信平台、百度 APP 和 UC 等国产移动浏览器下，live-player 组件的播放器会覆盖到页面其他内容之上，且无法通过 z-index 控制层级，从而导致一些交互失效（比如无法上下滑动触发切换视频）。
• 在 OPPO 手机下的百度 APP，会出现小窗播放。

解决方案： Web 态针对不同浏览器做了尽可能的修复，以解决此问题。已修复的包括 QQ、Android 微信、QQ 浏览器等基于 X5 内核的平台，百度 APP。但由于浏览器种类众多，有可能存在我们暂未覆盖到的情况。如仍遇到上述问题，请您将案例反馈给我们，我们将统一记录并反馈进展。