Web回放iFrameUI

1. 概述

回放iFrameUI为在您的网页中，通过Iframe方式，直接嵌套获得场景视频回放观看页面，快速实现回放观看功能。

资源下载

下载地址：https://dl.csslcloud.net/live/sdk/web/playbackIframeUI/demo.zip

压缩包内包Demo

浏览器支持

- Chrome  60+
- Firefox  52+
- IE9+ 
- Edge 
- Safari  10+

1.1 功能特性

iFrameUI目前包含播放器、文档功能、聊天功能、问答功能、以及随堂测、广播等互动功能

1.1.1 主要功能描述

2.快速集成

2.1 采用iFrameUI

通过iframe方式，在您的网页中，引入获得场景视频回放观看页面地址 。

<iframe allow="geolocation; microphone; camera; midi; encrypted-media;" src="您在获得场景视频平台的云直播回放观看地址" width="100%" height="1000" sandbox="allow-same-origin allow-scripts" allow="autoplay" scrolling="no" allow-scripts="" allowfullscreen="true" allowusermedia=""></iframe>

3.iFrameUI核心回调事件监听及说明

通过浏览器的onmessage窗口事件，监听iFrameUI的各回调事件，简易代码示例如下：

// toJson解析工具函数
function toJson (data) {
  if (!data) return {}
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data)
    } catch (e) {
      data = data.replace(/[\n|\t|\s|\r|\f]/g, "")
      data = JSON.parse(data)
    }
  }
  return data
}
// 挂载iFrame消息监听事件, 监听消息通知
window.hdMessage = function (event) {
  const msg = toJson(event.data)
  const {from, action, data} = msg
  console.log('from: ', from) // 消息来源 'hdPlayback'
  console.log('action: ', action}) // 消息事件
  console.log('data: ', data) // 事件的具体内容
}
if (window.attachEvent){
  window.attachEvent('onmessage', window.hdMessage, false)
} else {
  window.addEventListener('message', window.hdMessage, false)
}

其中，from 统一为hdPlayback , 代表消息由获得场景回放页面发出； 具体各action 及 对应的 data详细说明如下：