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

live-player 實(shí)時(shí)視頻播放器

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

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

支持服務(wù)類(lèi)目

屬性說(shuō)明

id

String

是

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

src

String

是

音視頻地址，詳見(jiàn)下方主流格式支持

autoplay

Boolean

false

否

自動(dòng)播放

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

muted

Boolean

false

否

是否靜音

orientation

String

vertical

否

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

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

object-fit

String

contain

否

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

background-mute

Boolean

false

否

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

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

min-cache

Number

1

否

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

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

max-cache

Number

3

否

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

此屬性對(duì) 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)聽(tīng)到全屏事件時(shí)，無(wú)法檢測(cè)全屏屏幕方向，因此 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)編輯工具

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

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度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">
  
  
  
 
  
  
  
 
  
  
  
 開(kāi)始播放
  
  
  
 停止播放
  
  
  
 
  
  
  
 靜音
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 設(shè)置填充模式為包含
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

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

Web 態(tài) Tip

Tip1：在部分瀏覽器下，視頻資源無(wú)法自動(dòng)播放的解決方案

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

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

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

Tip2：視頻類(lèi)資源地址必須有文件擴(kuò)展名（即文件后綴）

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

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

Tip3：在部分瀏覽器下，實(shí)時(shí)視頻播放器會(huì)遮擋其他頁(yè)面元素 / 小窗播放問(wèn)題的解決方案

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

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

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

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

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

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