live-player

2020-02-11 18:30 更新
基礎庫版本 1.44.0 開始支持,安卓 1.38.1 起支持目前支持宿主端頭條:安卓 746 版本,iOS 753 版本抖音:安卓 890,iOS 930(抖音 iOS 不能全屏)

相關 api:tt.createLivePlayerContext


參數說明

屬性名類型默認值必填說明最低版本
srcstring視頻地址。目前僅支持 flv,支持跨域
autoplaybooleanfalse是否自動播放
mutedbooleanfalse是否靜音
orientationstringvertical畫面朝向,vertical 為豎直,horizontal 為水平
object-fitstringcontain填充模式,可選值有 contain,fillCrop
bindstatechangeeventhandle播放狀態(tài)變化事件,detail = {code}
bindfullscreenchangeeventhandle全屏變化事件,detail = {direction, fullScreen}

src

直播流地址如果跨域,則必須滿足 cors 約束才能正常播放,具體設置可參考:

  • Access-Control-Allow-Headers: x-requested-with
  • Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
  • Access-Control-Allow-Origin: *
  • Access-Control-Max-Age: 1800

orientation 取值

說明
vertical豎直
horizontal水平

object-fit 取值

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

狀態(tài)碼

code說明
2004視頻播放開始
2005視頻播放進度
2006視頻播放結束
2007視頻播放緩沖
2103網絡出錯,正在搶救
-2301網絡失敗,無法播放


代碼示例

<live-player
  id="my-player"
  src="https://pull-flv-l6.ixigua.com/game/stream-106078795436654621.flv" rel="external nofollow" 
  autoplay
  bindstatechange="statechange"
>
  <button bindtap="requestFs" size="mini" hidden="{{isFullscreen}}">
    進入全屏
  </button>
  <button bindtap="exitFs" size="mini" hidden="{{!isFullscreen}}">
    退出全屏
  </button>
</live-player>
Page({
  data: {
    fullScreenDirection: 0
  },
  statechange(e) {
    console.log("狀態(tài)變化", e);
  },
  requestFs() {
    if (!this.ctx) {
      this.ctx = wx.createLivePlayerContext("my-player");
    }
    console.log("fullScreenDirection", this.data.fullScreenDirection);
    this.ctx.requestFullScreen({
      direction: Number(this.data.fullScreenDirection)
    });
  },
  exitFs() {
    this.ctx.exitFullScreen();
  }
});

Bug & Tip

  • 開發(fā)者工具上暫不支持。
  • 目前 iOS 全屏狀態(tài)下還不能覆蓋文字或者圖片,安卓可以
  • 部分安卓設備在切換全屏時偶現閃動的體驗問題


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號