百度智能小程序 實(shí)時視頻播放器

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

解釋：實(shí)時視頻播放器（v3.140.1 起支持 同層渲染 ）。live-player 組件還提供豐富的 api， 來控制實(shí)時視頻的播放、暫停、全屏等，詳見 swan.createLivePlayerContext。只針對直播答題、直播服務(wù)類目開放。需要先通過類目審核，再在小程序管理后臺，“開發(fā)管理-功能管理”頁面的“實(shí)時音視頻播放”模塊中自助開通該組件權(quán)限。

屬性說明

orientation 有效值

object-fit 有效值

主流格式支持

主流編碼格式支持

狀態(tài)碼

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

示例 

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

代碼示例

<view class="wrap">
    <view class="card-area">
        <live-player
            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">
        </live-player>
        <view class="button-group">
            <button type="primary" bind:tap="livePlay">開始播放</button>
            <button type="primary" bind:tap="liveStop">停止播放</button>
            <button type="primary" bind:tap="liveMute">{{muted? '設(shè)置': '設(shè)置不'}}靜音</button>
            <button type="primary" bind:tap="objectFit">object-fit為{{objectFit}}</button>
        </view>
    </view>
</view>

Bug & Tip

• Tip：live-player 默認(rèn)寬度 300px、高度 225px。Tip：從基礎(chǔ)庫版本 1.12.0 開始支持事件捕獲、冒泡。Tip：支持 HLS、RTMP 以及 HTTP-FLV 協(xié)議。

Web 態(tài) Tip

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

案例分析：出于用戶體驗(yàn)、節(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)入時，播放器上顯示播放按鈕供用戶主動點(diǎn)擊觸發(fā)播放。
• 對于其他非 X5 內(nèi)核的平臺，為保證頁面進(jìn)入時可自動播放，會默認(rèn)關(guān)閉聲音播放，并顯示“取消靜音”按鈕，供用戶主動開啟聲音。

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

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

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

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

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

案例分析：微信、百度 APP、UC 等瀏覽器實(shí)現(xiàn)了自身的播放器控件，劫持了默認(rèn)內(nèi)核提供的播放器樣式和邏輯，從而使得基于 H5 video 實(shí)現(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 手機(jī)下的百度 APP，會出現(xiàn)小窗播放。

解決方案：

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