You need to enable JavaScript to run this app.
导航
移动端 App 画中画模式实现方案
最近更新时间:2024.01.19 15:54:18首次发布时间:2024.01.11 11:02:56

本文介绍如何在使用SaaS或1.1.7及以上版本的Web观播SDK时,在您的移动端App中实现画中画模式。观众在离开观看页时,例如打开新页面或将观看页切换至后台,可通过画中画模式观看直播或点播内容。

注意

  • 本方案旨在建立一套 Web 与 Native 之间的通信机制,需要 Native 接入方具备一定开发能力,从而完成通信以及调整 WebView 的窗口大小。
  • Native 指移动端 App,以下均以 Native 指代移动端 App。

效果演示

图片

方案介绍

作为 Native 接入方,您可以在 App 中使用 WebView 打开直播间的 H5 页面,并按需调整 WebView 的窗口大小,同时通过 JsBridge 与 H5 页面(Web 端)进行消息通信,使用 postMessage 方法实现数据的传递和交互。

前提条件

Android 侧必须自行实现 invokeNative 方法,Web 才能向 Native 发送消息。

流程详解

图片

  1. 观众访问观看页,Native 监听到 Web 的 INIT_FINISH 事件,感知 JSBridge 已加载完成。
  2. Native 监听到 Web 的 CREATE_PLAYER 事件,感知播放器已创建完成、直播间是否正在直播中以及是否为竖屏模式。
  3. 观众离开观看页,Native 需自行实现进入画中画模式并向 Web 发送 ENTER_MINI_WINDOW 事件。
  4. Web 监听到 Native 的 ENTER_MINI_WINDOW 事件,将播放器全屏显示在画中画模式小窗中。
  5. 观众点击画中画模式小窗,Native 需自行实现退出画中画模式并向 Web 发送 EXIT_MINI_WINDOW 事件。
  6. Web 监听到 Native 的 EXIT_MINI_WINDOW 事件,退出播放器全屏并恢复至观看页。
  7. 直播间状态发生变化或观众切换直播频道等场景下,Native 监听到 Web 的 DESTROY_PLAYER 事件,感知播放器已销毁。此时 Native 可按需自行实现退出画中画模式并向 Web 发送 EXIT_MINI_WINDOW 事件。Web 监听到 Native 的 EXIT_MINI_WINDOW 事件,退出播放器全屏并恢复至观看页。
  8. (可选)如果 WebView 出现播放问题,Native 可以:
    • 在 WebView 暂停播放时,Native 向 Web 发送 PLAY 事件。Web 监听到该事件后即可播放直播或点播内容。
    • 在 WebView 播放期间,Native 向 Web 发送 STOP_PLAY 事件。Web 监听到该事件后即可暂停播放直播或点播内容。

相关事件的详细信息,见事件

附录

信令定义

Native 和 Web 均需遵守以下信令定义从而实现双端通信。

// 通信中使用的消息类型
export interface IMessage {
  eventKey: number; // 消息类型
  info?: any; // (可选)附加信息
}

// Web 向 Native 发送的消息定义
export enum Web2NativeMessageEvent {
  /** JsBridge 加载完成 */
  INIT_FINISH = 10001,
  /** 创建播放器 */
  CREATE_PLAYER = 11000,
  /** 销毁播放器 */
  DESTROY_PLAYER,
}

// Native 向 Web 发送的消息定义
export enum Native2WebMessageEvent {
  /** 进入画中画模式 */
  ENTER_MINI_WINDOW = 21000,
  /** 退出画中画模式 */
  EXIT_MINI_WINDOW,
}

// 创建播放器事件定义
export interface IMsgCreatePlayer {
  isPortrait: boolean; // 是否为竖屏模式
  isLive: boolean; // 是否正在直播中
}

JsBridge 交互流程

JSBridge 是一道横跨 Native 和 Web 的桥梁,是双端进行通信的媒介。
企业直播在 window 上注入全局变量 window.ByteLiveJsBridge,包含以下 API:

  • nativeCallBack:Native 调用 window.ByteLiveJsBridge.nativeCallBack 向 Web 发送消息。
  • invokeNative:Web 调用该 API 向 Native 发送消息。

事件

Native 监听的 Web 事件

// 创建播放器事件
window.ByteLiveJsBridge.invokeNative({
  eventKey:11000,
  info: {
     isPortrait: true, // 竖屏模式
     isLive: true, // 直播中
  }
)

事件

Key

含义

INIT_FINISH

10001

JsBridge 加载完成事件。

CREATE_PLAYER

11000

创建播放器事件。

说明

触发该事件后,可通过 info 参数获取直播间是否正在直播中以及是否为竖屏模式。

DESTROY_PLAYER

11001

销毁播放器事件。

Native 向 Web 发送的事件

// 进入画中画模式事件
window.ByteLiveJsBridge.nativeCallBack({
  eventKey: 21000   
})

事件

Key

含义

ENTER_MINI_WINDOW

21000

进入画中画模式事件。

EXIT_MINI_WINDOW

21001

退出画中画模式事件。

STOP_PLAY

21002

暂停播放事件。

START_PLAY

21003

恢复播放并退出画中画模式事件。

PLAY

21004

播放事件。