live-player 实时视频播放器

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

属性说明

orientation 有效值

object-fit 有效值

主流格式支持

主流编码格式支持

状态码

|代码 |说明 |Web 态说明||:—|:—||2001|已经连接服务器|暂不支持||2002|已经连接服务器,开始拉流|-||2003|网络接收到首个视频数据包(IDR)|-||2004|视频播放开始|-||2005|视频播放进度|-||2006|视频播放结束|-||2007|视频播放Loading|-||2008|解码器启动|暂不支持||2009|视频分辨率改变|暂不支持||-2301|网络断连，且经多次重连抢救无效，更多重试请自行重启播放|-||-2302|获取加速拉流地址失败|暂不支持||2101|当前视频帧解码失败|-||2102|当前音频帧解码失败|暂不支持||2103|网络断连, 已启动自动重连|暂不支持||2104|网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀|-||2105|当前视频播放出现卡顿|-||2106|硬解启动失败，采用软解|暂不支持||2107|当前视频帧不连续，可能丢帧|暂不支持||2108|当前流硬解第一个I帧失败，SDK自动切软解|暂不支持||3001|RTMP -DNS解析失败|暂不支持||3002|RTMP服务器连接失败|暂不支持||3003|RTMP服务器握手失败|暂不支持||3005|RTMP 读/写失败|暂不支持|

网络状态数据

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

在开发者工具中预览效果

  1. <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>
  1. Page({
  2.     data: {
  3.         cur: 0,
  4.         autoplay: false,
  5.         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',
  6.         srcList: [
  7.             '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',
  8.             'https://vd3.bdstatic.com/mda-ib0u8x1bvaf00qa8/mda-ib0u8x1bvaf00qa8.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D'
  9.         ],
  10.         objectFit: 'contain',
  11.         orientation: 'vertical',
  12.         minCache: 1,
  13.         maxCache: 3,
  14.         muted: false,
  15.         backgroundMute: false
  16.     },
  17.     onReady(e) {
  18.         this.ctx = swan.createLivePlayerContext('myLive');
  19.     },
  20.     statechange(e) {
  21.         console.log('播放状态变化 statechange' + JSON.stringify(e))
  22.     },
  23.     netstatus(e) {
  24.         console.log('网络状态变化 netstatus' + JSON.stringify(e))
  25.     },
  26.     livePlay(e) {
  27.         this.ctx.play();
  28.     },
  29.     objectFit(e) {
  30.         this.setData('objectFit', this.getData('objectFit') === 'contain' ? 'fillCrop' : 'contain');
  31.     },
  32.     liveStop(e) {
  33.         this.ctx.stop();
  34.     },
  35.     liveMute(e) {
  36.         this.setData({
  37.             muted: true
  38.         });
  39.     },
  40.     changeSrc(e) {
  41.         let srcList = this.getData('srcList');
  42.         let cur = (this.getData('cur') + 1) % srcList.length;
  43.         this.setData('src', srcList[cur]);
  44.         this.setData('cur', cur);
  45.     },
  46.     backgroundMute(e) {
  47.         this.setData({
  48.             'backgroundMute': true
  49.         });
  50.     },
  51. });

Bug & Tip

  • -

    Web 态 Tip

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

    案例分析：出于用户体验、节省流量等原因，iOS 的 Safari、版本号 66 及以上的 Chrome、以及大部分国产移动浏览器禁止视频在非静音状态下自动播放。因此，Web 态针对 live-player 组件中 autoplay 属性设置为 true 后做了如下处理：
  • - 由于浏览器种类众多，如出现自动播放相关新问题，请将案例反馈给我们，我们将统一记录并反馈进展。

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

    由于浏览器无法解析资源格式。因此对于视频类资源，应在地址中通过后缀名显式声明资源格式，否则可能会导致视频无法正常播放：
  • src 属性值没有文件扩展名，视频资源会被按照 mp4 格式来进行解码播放。

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

    案例分析：微信、百度 APP、UC 等浏览器实现了自身的播放器控件，劫持了默认内核提供的播放器样式和逻辑，从而使得基于 H5 video 实现的 Web 态 live-player 组件出现了以下问题：
  • - 解决方案：Web 态针对不同浏览器做了尽可能的修复，以解决此问题。已修复的包括 QQ、Android 微信、QQ 浏览器等基于 X5 内核的平台，百度 APP。但由于浏览器种类众多，有可能存在我们暂未覆盖到的情况。如仍遇到上述问题，请您将案例反馈给我们，我们将统一记录并反馈进展。