甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程：live-player 实时视频播放器

  • live-player 实时视频播放器
    • 属性说明
      • orientation 有效值
      • object-fit 有效值
      • 主流格式支持
      • 主流编码格式支持
      • 状态码
      • 网络状态数据
    • 示例
      • 代码示例
    • Bug & Tip
    • Web 态 Tip
      • Tip1：在部分浏览器下，视频资源无法自动播放的解决方案
      • Tip2：视频类资源地址必须有文件扩展名（即文件后缀）
      • Tip3：在部分浏览器下，实时视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案
      • Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

    live-player 实时视频播放器

    v3.140.1 起支持同层渲染，更多请参考原生组件。从基础库版本 1.12.0 开始支持事件捕获、冒泡。

    解释：实时视频播放器。live-player 组件默认宽度 300px 、高度 225px 。该组件还提供丰富的 API ，来控制实时视频的播放、暂停、全屏等，详见 swan.createLivePlayerContext 。只针对直播答题、直播服务类目开放，需要先通过类目审核，再在小程序管理后台，“开发管理 -> 功能管理”页面的“实时音视频播放”模块中自助开通该组件权限。

    支持服务类目

    一级类目二级类目
    娱乐直播、直播答题

    属性说明

    id

    String

    是

    live-player 属性的唯一标志符

    src

    String

    是

    音视频地址，详见下方主流格式支持

    autoplay

    Boolean

    false

    否

    自动播放

    存在浏览器兼容问题，详见下方 Web 态 Tip1

    muted

    Boolean

    false

    否

    是否静音

    orientation

    String

    vertical

    否

    画面方向，有效值有 vertical、horizontal 。目前仅支持安卓端使用该属性

    此属性对 Web 态不生效

    object-fit

    String

    contain

    否

    填充模式，有效值：contain、fillCrop

    background-mute

    Boolean

    false

    否

    进入后台时是否静音（已废弃，默认退台静音）

    默认退台静音，设置为 false 后不生效

    min-cache

    Number

    1

    否

    最小缓冲区（单位：s）

    此属性对 Web 态不生效

    max-cache

    Number

    3

    否

    最大缓冲区（单位：s）

    此属性对 Web 态不生效

    bindstatechange

    EventHandle

    否

    播放状态变化事件，参考下方状态码，detail = {code}

    bindnetstatus

    EventHandle

    否

    网络状态变化通知，参考下方网络状态数据，detail = {info}

    bindfullscreenchange

    EventHandle

    否

    全屏变化事件，detail = {direction, fullscreen}

    Web 态下监听到全屏事件时，无法检测全屏屏幕方向，因此 direction 属性始终为 0

    属性名类型默认值必填说明Web 态说明
    -
    -
    -
    -
    -

    orientation 有效值

    值说明
    vertical垂直方向
    horizontal水平方向

    object-fit 有效值

    值说明
    contain包含
    fillCrop填充

    主流格式支持

    格式AndroidiOSWeb 态
    mp4是是是
    mov是是是
    m4v是是是
    3gp是是否
    avi是是否
    m3u8是是是
    webm是否否
    flv是是否
    mkv是是否
    rmvb是是否
    rm是是否
    ogg是是是

    主流编码格式支持

    H.263

    是

    是

    H.264

    是

    是

    HEVC

    是

    是

    MPEG-4

    是

    否

    VP8

    是

    否

    VP9

    是

    否

    格式AndroidiOS

    状态码

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

    网络状态数据

    键名说明
    videoBitrate当前视频编 / 码器输出的比特率（单位：kbps）
    audioBitrate当前音频编 / 码器输出的比特率（单位：kbps）
    videoFPS当前视频帧率
    videoGOP当前视频 GOP（单位：s），也就是每两个关键帧(I 帧)间隔时长。（安卓不支持该键名）
    netSpeed当前的发送/接收速度
    netStatus网络状态：-1 为未知；0 为网络不可用；1 为无线广域网连接；2 为 WiFi 连接。（安卓不支持该键名）
    videoWidth视频画面的宽度
    videoHeight视频画面的高度

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  id="myLive"
      5.   
  
  
    5.  src="{{src}}"
      6.   
  
  
    6.  autoplay="{{autoplay}}"
      7.   
  
  
    7.  muted="{{muted}}"
      8.   
  
  
    8.  orientation="{{orientation}}"
      9.   
  
  
    9.  object-fit="{{objectFit}}"
      10.   
  
  
    10.  min-cache="{{minCache}}"
      11.   
  
  
    11.  max-cache="{{maxCache}}"
      12.   
  
  
    12.  bind:statechange="statechange"
      13.   
  
  
    13.  bind:netstatus="netstatus"
      14.   
  
  
    14.  bind:fullscreenchange="fullscreenchange">
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      20.   
  
  
    20.  静音
      21.   
  
  
    21.  
      22.   
  
  
    22.  
      23.   
  
  
    23.  
      24.   
  
  
    24.  设置填充模式为包含
      25.   
  
  
    25.  
      26.   
  
  
    26.  
      27.   
  
  
    27.  
      28.   
  
  
    28.  
      29.   
  
  
      30.

    Bug & Tip

    • Tip：支持 HLS、RTMP 以及 HTTP-FLV 协议。

    Web 态 Tip

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

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

    • 对于 QQ、Android 微信、 QQ 浏览器等基于 X5 内核的平台，Web 态下设置的autoplay = true不生效，页面进入时，播放器上显示播放按钮供用户主动点击触发播放。
    • 对于其他非 X5 内核的平台，为保证页面进入时可自动播放，会默认关闭声音播放，并显示“取消静音”按钮，供用户主动开启声音。
    • 为“取消静音”和播放按钮设置了较高的 z-index 样式层级，开发者可以根据需要来决定是否覆盖这两类按钮。

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

    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 。但由于浏览器种类众多，有可能存在我们暂未覆盖到的情况。如仍遇到上述问题，请您将案例反馈给我们，我们将统一记录并反馈进展。

    Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

    案例分析：
    微信、QQ、QQ 浏览器等实现了自身的播放控件，从而使得 live-player 组件在退出全屏时出现视频暂停播放的问题。

    解决方案：
    Web 态针对 Android 下的微信、QQ 等基于 X5 内核的平台在退出全屏时展示一个中间播放按钮，供用户点击来继续播放视频。iOS 下因无法监听退出全屏事件，此问题暂无法解决。


    新闻名称：创新互联百度小程序教程：live-player 实时视频播放器
    标题网址：https://chengdu.cdxwcx.cn/article/cohddjg.html

    其他资讯