本客服平台由提供产品服务

通过嵌入的播放器代码进行二次开发

ludai发表于:2017年07月13日 16:04:58更新于:2018年08月28日 16:56:07

1、可通过 iframe 嵌入代码,获取直播信息数据

可通过播放器嵌入代码获取页面信息数据,进行部分功能,如:活动开始时间显示、倒计时、结束时间、推流状态、活动状态等自主功能开发。

嵌入页面检测到数据变更时,主动上报发送消息

消息内容:

changedParam     array of string    本次更新的字段
example: ["isPushing","startedAt"]
——————————————————————————————————————————————————
startedAt        string             活动开始时间
example: 2017-07-10T09:44:59.000Z
——————————————————————————————————————————————————
endedAt          string             活动结束时间
example: 2017-08-07T09:27:00.000Z
——————————————————————————————————————————————————
isPushing        boolean            是否在推流
example: true
——————————————————————————————————————————————————
liveStatus       enum               当前状态
example: "未开始","直播中","已结束"
——————————————————————————————————————————————————
online           int                pv
example: 1
——————————————————————————————————————————————————
liveType           enum             播放类型
example: "live", "isPrologue", "isEpilogue"
live-直播,isPrologue-预设视频,isEpilogue-回放


使用方法:

<script>
function receiveMessage(event)
{
 if (event.origin.indexOf('shangzhibo.tv') === -1) {
    return;
}
// your code with event.data
}
window.onload = function() {
if (window.addEventListener) {
window.addEventListener('message', receiveMessage, false);
} else {
window.attachEvent('message', receiveMessage);
}
}
</script>


2、利用嵌入代码,实现跑马灯功能

image.png

使用方法:

document.getElementById("iframeId").contentWindow 
  .postMessage( 
      {
        type: 'marquee', // 必须
        message: '', //跑马灯显示信息
        time: 5, //Number 秒 默认为 5
        style: {
          color: '#108EE9', //十六进制颜色码,默认主色
          fontSize: 14, //字号,默认14px
          opacity: '0.6' //不透明度,0-1,默认0.6
        } //自定义样式,可为空
      },
      'http://shangzhibo.tv'
  )

将上述代码嵌入页面中即可

页面嵌入 iframe 后,待 iframe 加载完毕

可通过 postMessage API 开启跑马灯功能   

>>> 点击查看 DEMO 示例 <<<



3、通过嵌入代码,实现课程章节目录

使用方法:

document.getElementById('iframeId').contentWindow
    .postMessage(
        {
            type: 'video',
            id:{mediaId},
        }, 
        'http://shangzhibo.tv'//此处域名用定制域名,如果没有定制域名使用 shangzhibo.tv 
     )

将上述代码嵌入页面中即可

页面嵌入 iframe 后,待 iframe 加载完毕

可通过 postMessage API 切换 isPlayback 为 true 的视频  ,从而实现课程目录下的视频的切换。


延伸说明:


如有其他数据需要获取可联系

杨经理:18968187008

彭经理:15167172618

    您需要登录后才可以回复