• live-player 實時視頻播放器
  • 屬性說明
    • orientation 有效值
    • object-fit 有效值
    • 主流格式支持
    • 主流編碼格式支持
    • 狀態(tài)碼
    • 網(wǎng)絡(luò)狀態(tài)數(shù)據(jù)
  • 示例
    • 代碼示例
  • Bug & Tip
  • Web 態(tài) Tip
    • Tip1：在部分瀏覽器下，視頻資源無法自動播放的解決方案
    • Tip2：視頻類資源地址必須有文件擴展名（即文件后綴）
    • Tip3：在部分瀏覽器下，實時視頻播放器會遮擋其他頁面元素 / 小窗播放問題的解決方案
    • Tip4：在部分瀏覽器下，視頻播放器退出全屏后會暫停播放

live-player 實時視頻播放器

v3.140.1 起支持同層渲染，更多請參考原生組件。從基礎(chǔ)庫版本 1.12.0 開始支持事件捕獲、冒泡。

解釋：實時視頻播放器。live-player 組件默認(rèn)寬度 300px 、高度 225px 。該組件還提供豐富的 API ，來控制實時視頻的播放、暫停、全屏等，詳見 swan.createLivePlayerContext 。只針對直播答題、直播服務(wù)類目開放，需要先通過類目審核，再在小程序管理后臺，“開發(fā)管理 -> 功能管理”頁面的“實時音視頻播放”模塊中自助開通該組件權(quán)限。

支持服務(wù)類目

屬性說明

id

String

是

live-player 屬性的唯一標(biāo)志符

src

String

是

音視頻地址，詳見下方主流格式支持

autoplay

Boolean

false

否

自動播放

存在瀏覽器兼容問題，詳見下方 Web 態(tài) Tip1

muted

Boolean

false

否

是否靜音

orientation

String

vertical

否

畫面方向，有效值有 vertical、horizontal 。目前僅支持安卓端使用該屬性

此屬性對 Web 態(tài)不生效

object-fit

String

contain

否

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

background-mute

Boolean

false

否

進(jìn)入后臺時是否靜音（已廢棄，默認(rèn)退臺靜音）

默認(rèn)退臺靜音，設(shè)置為 false 后不生效

min-cache

Number

1

否

最小緩沖區(qū)（單位：s）

此屬性對 Web 態(tài)不生效

max-cache

Number

3

否

最大緩沖區(qū)（單位：s）

此屬性對 Web 態(tài)不生效

bindstatechange

EventHandle

否

播放狀態(tài)變化事件，參考下方狀態(tài)碼，detail = {code}

bindnetstatus

EventHandle

否

網(wǎng)絡(luò)狀態(tài)變化通知，參考下方網(wǎng)絡(luò)狀態(tài)數(shù)據(jù)，detail = {info}

bindfullscreenchange

EventHandle

否

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

Web 態(tài)下監(jiān)聽到全屏事件時，無法檢測全屏屏幕方向，因此 direction 屬性始終為 0

orientation 有效值

object-fit 有效值

主流格式支持

主流編碼格式支持

H.263

是

是

H.264

是

是

HEVC

是

是

MPEG-4

是

否

VP8

是

否

VP9

是

否

狀態(tài)碼

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

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 id="myLive"
  
  
  
 src="{{src}}"
  
  
  
 autoplay="{{autoplay}}"
  
  
  
 muted="{{muted}}"
  
  
  
 orientation="{{orientation}}"
  
  
  
 object-fit="{{objectFit}}"
  
  
  
 min-cache="{{minCache}}"
  
  
  
 max-cache="{{maxCache}}"
  
  
  
 bind:statechange="statechange"
  
  
  
 bind:netstatus="netstatus"
  
  
  
 bind:fullscreenchange="fullscreenchange">
  
  
  
 
  
  
  
 
  
  
  
 開始播放
  
  
  
 停止播放
  
  
  
 
  
  
  
 靜音
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 設(shè)置填充模式為包含
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

• Tip：支持 HLS、RTMP 以及 HTTP-FLV 協(xié)議。

Web 態(tài) Tip

Tip1：在部分瀏覽器下，視頻資源無法自動播放的解決方案

案例分析：
出于用戶體驗、節(jié)省流量等原因，iOS 的 Safari、版本號 66 及以上的 Chrome、以及大部分國產(chǎn)移動瀏覽器禁止視頻在非靜音狀態(tài)下自動播放。因此，Web 態(tài)針對 live-player 組件中 autoplay 屬性設(shè)置為 true 后做了如下處理：

• 對于 QQ、Android 微信、 QQ 瀏覽器等基于 X5 內(nèi)核的平臺，Web 態(tài)下設(shè)置的autoplay = true不生效，頁面進(jìn)入時，播放器上顯示播放按鈕供用戶主動點擊觸發(fā)播放。
• 對于其他非 X5 內(nèi)核的平臺，為保證頁面進(jìn)入時可自動播放，會默認(rèn)關(guān)閉聲音播放，并顯示“取消靜音”按鈕，供用戶主動開啟聲音。
• 為“取消靜音”和播放按鈕設(shè)置了較高的 z-index 樣式層級，開發(fā)者可以根據(jù)需要來決定是否覆蓋這兩類按鈕。

由于瀏覽器種類眾多，如出現(xiàn)自動播放相關(guān)新問題，請將案例反饋給我們，我們將統(tǒng)一記錄并反饋進(jìn)展。

Tip2：視頻類資源地址必須有文件擴展名（即文件后綴）

由于瀏覽器無法解析資源格式。因此對于視頻類資源，應(yīng)在地址中通過后綴名顯式聲明資源格式，否則可能會導(dǎo)致視頻無法正常播放：

• Web 態(tài) live-player 組件目前支持 mp4、mov、m4v、ogg、m3u8 等格式，參見主流格式支持。
• 當(dāng) live-player 組件的 src 屬性值沒有文件擴展名，視頻資源會被按照 mp4 格式來進(jìn)行解碼播放。

Tip3：在部分瀏覽器下，實時視頻播放器會遮擋其他頁面元素 / 小窗播放問題的解決方案

案例分析：
微信、百度 App、UC 等瀏覽器實現(xiàn)了自身的播放器控件，劫持了默認(rèn)內(nèi)核提供的播放器樣式和邏輯，從而使得基于 H5 video 實現(xiàn)的 Web 態(tài) live-player 組件出現(xiàn)了以下問題：

• 在 Android 系統(tǒng)的微信平臺、百度 App 和 UC 等國產(chǎn)移動瀏覽器下，live-player 組件的播放器會覆蓋到頁面其他內(nèi)容之上，且無法通過 z-index 控制層級，從而導(dǎo)致一些交互失效（比如無法上下滑動觸發(fā)切換視頻）。
• 在 OPPO 手機下的百度 App ，會出現(xiàn)小窗播放。

解決方案：
Web 態(tài)針對不同瀏覽器做了盡可能的修復(fù)，以解決此問題。已修復(fù)的包括 QQ、Android 微信、QQ 瀏覽器等基于 X5 內(nèi)核的平臺，百度 App 。但由于瀏覽器種類眾多，有可能存在我們暫未覆蓋到的情況。如仍遇到上述問題，請您將案例反饋給我們，我們將統(tǒng)一記錄并反饋進(jìn)展。

Tip4：在部分瀏覽器下，視頻播放器退出全屏后會暫停播放

案例分析：
微信、QQ、QQ 瀏覽器等實現(xiàn)了自身的播放控件，從而使得 live-player 組件在退出全屏?xí)r出現(xiàn)視頻暫停播放的問題。

解決方案：
Web 態(tài)針對 Android 下的微信、QQ 等基于 X5 內(nèi)核的平臺在退出全屏?xí)r展示一個中間播放按鈕，供用戶點擊來繼續(xù)播放視頻。iOS 下因無法監(jiān)聽退出全屏事件，此問題暫無法解決。