微信小程序媒體組件 live-player

2022-05-11 16:12 更新

live-player

基礎(chǔ)庫 1.7.0 開始支持,低版本需做兼容處理。

實時音視頻播放(v2.9.1 起支持同層渲染)。

暫只針對國內(nèi)主體如下類目的小程序開放,需要先通過類目審核,再在小程序管理后臺,「開發(fā)」-「接口設(shè)置」中自助開通該組件權(quán)限。

一級類目/主體類型 二級類目 小程序內(nèi)容場景
社交 直播 涉及娛樂性質(zhì),如明星直播、生活趣事直播、寵物直播等。選擇該類目后首次提交代碼審核,需經(jīng)當(dāng)?shù)鼗ヂ?lián)網(wǎng)主管機(jī)關(guān)審核確認(rèn),預(yù)計審核時長 7 天左右
教育 在線視頻課程 網(wǎng)課、在線培訓(xùn)、講座等教育類直播
醫(yī)療 互聯(lián)網(wǎng)醫(yī)院,公立醫(yī)療機(jī)構(gòu),私立醫(yī)療機(jī)構(gòu) 問診、大型健康講座等直播
金融 銀行、信托、公募基金、私募基金、證券/期貨、證券、期貨投資咨詢、保險、征信業(yè)務(wù)、新三板信息服務(wù)平臺、股票信息服務(wù)平臺(港股/美股)、消費金融 金融產(chǎn)品視頻客服理賠、金融產(chǎn)品推廣直播等
汽車 汽車預(yù)售服務(wù) 汽車預(yù)售、推廣直播
政府主體帳號 / 政府相關(guān)工作推廣直播、領(lǐng)導(dǎo)講話直播等
工具 視頻客服 不涉及以上幾類內(nèi)容的一對一視頻客服服務(wù),如企業(yè)售后一對一視頻服務(wù)等
IT科技 多方通信 為多方提供電話會議/視頻會議等服務(wù)
屬性 類型 默認(rèn)值 必填 說明 最低版本
src string 音視頻地址。目前僅支持 flvrtmp 格式 1.7.0
mode string live 模式 1.7.0
autoplay boolean false 自動播放 1.7.0
muted boolean false 是否靜音 1.7.0
orientation string vertical 畫面方向 1.7.0
object-fit string contain 填充模式,可選值有 contain,fillCrop 1.7.0
background-mute boolean false 進(jìn)入后臺時是否靜音(已廢棄,默認(rèn)退后臺靜音) 1.7.0
min-cache number 1 最小緩沖區(qū),單位s(RTC 模式推薦 0.2s) 1.7.0
max-cache number 3 最大緩沖區(qū),單位s(RTC 模式推薦 0.8s)。緩沖區(qū)用來抵抗網(wǎng)絡(luò)波動,緩沖數(shù)據(jù)越多,網(wǎng)絡(luò)抗性越好,但時延越大。 1.7.0
sound-mode string speaker 聲音輸出方式 1.9.90
auto-pause-if-navigate boolean true 當(dāng)跳轉(zhuǎn)到本小程序的其他頁面時,是否自動暫停本頁面的實時音視頻播放 2.5.0
auto-pause-if-open-native boolean true 當(dāng)跳轉(zhuǎn)到其它微信原生頁面時,是否自動暫停本頁面的實時音視頻播放 2.5.0
picture-in-picture-mode string/Array 設(shè)置小窗模式: push, pop,空字符串或通過數(shù)組形式設(shè)置多種模式(如: ["push", "pop"]) 2.10.3
bindstatechange eventhandle 播放狀態(tài)變化事件,detail = {code} 1.7.0
bindfullscreenchange eventhandle 全屏變化事件,detail = {direction, fullScreen} 1.7.0
bindnetstatus eventhandle 網(wǎng)絡(luò)狀態(tài)通知,detail = {info} 1.9.0
bindaudiovolumenotify eventhandler 播放音量大小通知,detail = {} 2.10.0
bindenterpictureinpicture eventhandler 播放器進(jìn)入小窗 2.11.0
bindleavepictureinpicture eventhandler 播放器退出小窗 2.11.0

mode 的合法值

說明 最低版本
live 直播
RTC 實時通話,該模式時延更低

orientation 的合法值

說明 最低版本
vertical 豎直
horizontal 水平

object-fit 的合法值

說明 最低版本
contain 圖像長邊填滿屏幕,短邊區(qū)域會被填充??
fillCrop 圖像鋪滿屏幕,超出顯示區(qū)域的部分將被截掉

sound-mode 的合法值

說明 最低版本
speaker 揚聲器
ear 聽筒

picture-in-picture-mode 的合法值

說明 最低版本
[] 取消小窗
push 路由 push 時觸發(fā)小窗
pop 路由 pop 時觸發(fā)小窗

狀態(tài)碼

代碼 說明
2001 已經(jīng)連接服務(wù)器
2002 已經(jīng)連接 RTMP 服務(wù)器,開始拉流
2003 網(wǎng)絡(luò)接收到首個視頻數(shù)據(jù)包(IDR)
2004 視頻播放開始
2005 視頻播放進(jìn)度
2006 視頻播放結(jié)束
2007 視頻播放Loading
2008 解碼器啟動
2009 視頻分辨率改變
-2301 網(wǎng)絡(luò)斷連,且經(jīng)多次重連搶救無效,更多重試請自行重啟播放
-2302 獲取加速拉流地址失敗
2101 當(dāng)前視頻幀解碼失敗
2102 當(dāng)前音頻幀解碼失敗
2103 網(wǎng)絡(luò)斷連, 已啟動自動重連
2104 網(wǎng)絡(luò)來包不穩(wěn):可能是下行帶寬不足,或由于主播端出流不均勻
2105 當(dāng)前視頻播放出現(xiàn)卡頓
2106 硬解啟動失敗,采用軟解
2107 當(dāng)前視頻幀不連續(xù),可能丟幀
2108 當(dāng)前流硬解第一個I幀失敗,SDK自動切軟解
3001 RTMP -DNS解析失敗
3002 RTMP服務(wù)器連接失敗
3003 RTMP服務(wù)器握手失敗
3005 RTMP 讀/寫失敗,之后會發(fā)起網(wǎng)絡(luò)重試

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

鍵名 說明
videoBitrate 當(dāng)前視頻編/碼器輸出的比特率,單位 kbps
audioBitrate 當(dāng)前音頻編/碼器輸出的比特率,單位 kbps
videoFPS 當(dāng)前視頻幀率
videoGOP 當(dāng)前視頻 GOP,也就是每兩個關(guān)鍵幀(I幀)間隔時長,單位 s
netSpeed 當(dāng)前的發(fā)送/接收速度
netJitter 網(wǎng)絡(luò)抖動情況,為 0 時表示沒有任何抖動,值越大表明網(wǎng)絡(luò)抖動越大,網(wǎng)絡(luò)越不穩(wěn)定
videoWidth 視頻畫面的寬度
videoHeight 視頻畫面的高度

小窗特性說明

live-player 小窗支持以下三種觸發(fā)模式(在組件上設(shè)置 picture-in-picture-mode 屬性):

  1. push 模式,即從當(dāng)前頁跳轉(zhuǎn)至下一頁時出現(xiàn)小窗(頁面棧push)
  2. pop 模式,即離開當(dāng)前頁面時觸發(fā)(頁面棧pop)
  3. 以上兩種路由行為均觸發(fā)小窗

此外,小窗還支持以下特性:

  • 小窗容器尺寸會根據(jù)原組件尺寸自動判斷
  • 點擊小窗,用戶會被導(dǎo)航回小窗對應(yīng)的播放器頁面
  • 小窗出現(xiàn)后,用戶可點擊小窗右上角的關(guān)閉按鈕或調(diào)用 context.exitPictureInPicture() 接口關(guān)閉小窗

當(dāng)播放器進(jìn)入小窗模式后,播放器所在頁面處于 hide 狀態(tài)(觸發(fā) onHide 生命周期),該頁面不會被銷毀。當(dāng)小窗被關(guān)閉時,播放器所在頁面會被 unload (觸發(fā) onUnload 生命周期)。

提示:

  1. live-player 默認(rèn)寬度300px、高度225px,可通過wxss設(shè)置寬高。
  2. 開發(fā)者工具上暫不支持。

示例代碼

<live-player src="https://domain/pull_stream" rel="external nofollow"  mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號