移动端 App 画中画模式实现方案

本文介绍如何在使用SaaS或1.1.7及以上版本的Web观播SDK时，在您的移动端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, // 直播中
  }
)

Native 向 Web 发送的事件

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