百家云双师课堂
产品文档 直播技术文档 直播H5课件

H5课件

简介

上传入口

  • 1.【教室内上传压缩包】上传入口位于动态课件上传入口（目前仅支持zip格式且压缩包根目录中必须包含index.html的入口文件）；
  • 2.【通过API接口创建教室绑定H5课件地址】详情请联系百家云技术支持人员；
  • 3.【链接格式H5课件-仅支持小班课】上传入口在百家云后台；

注意事项

  • 1.为避免造成服务器压力，尽量不要短时间内频繁操作课件
  • 2.不符合压缩包格式和内容的H5课件将无法正常使用

通信机制

BJYBridge提供了iframe和外层交互的桥梁，你可以通过BJYBridge实例来实现自己的动态PPT。BJYBridge是单例模式，一个页面中只能存在一个bridge实例。

请引入以下地址的桥接文件:

https://live-cdn.baijiayun.com/js-sdk/tool/BJYBridge.js

BJYBridge

为了保证教室所有人的处于相同状态，操作课件需要先向服务器发送操作的请求，在得到服务器响应之后才进行实际操作。BJYBridge的使用过程大致如下: * 使用getInstance方法获取单例，在传入的参数中需要指定onPageChange和onRecordChange两个回调函数，分别用于在服务器响应了翻页请求和操作请求之后进行具体的业务操作； * 在课件准备就绪之后，调用getReady方法，并传入当前的页码、步骤、总页数、总步数信息； * 在需要翻页的时候，调用requestChangePage方法。注意：这里只是通知服务器将要翻页，具体翻页动作请在onPageChange的回调之中执行； * 在需要进行一些特殊操作如播放动画时，调用pushRecord方法。注意：同上，具体的业务处理请在onRecordChange回调之中执行

Variables

  • page[number] 课件的页码
  • step[number] 课件的步骤
  • pageCount[number] 课件的总页码
  • stepCount[number] 课件当前页的总步数

Functions

static getInstance(options: BridgeOptions):Bridge

静态函数，返回BJYBridge的唯一实例

// 获取Bridge单例
var bridge = BJYBridge.getInstance({
    // 响应由bridge通知而来的翻页指令
    onPageChange: function (page, step) {
        // 需要在此回调函数中返回一个promise对象。
        return new Promise(resolve => {
            // 执行具体的翻页逻辑，并在完成后将当前页的步数传递给Promise链
            // YOUR CODE HERE
            resolve(stepCount);
        });
    },
    // 响应由bridge通知而来的本页操作记录变化
    onRecordChange: function (record, prevRecord) {
        // 根据具体业务响应操作变化
        // 数组的末尾为最新的一条操作记录，你可以根据两个数组的长度得知是否为撤销操作
    }
});
getReady(data: InitData):void

初始化，当课件准备就绪时应该调用此函数

// 传入初始的页码、步骤、总页数、总步数信息
// 如果你的课件总页数（如同链表）无法得知，请pageCount传入0
bridge.getReady({
    page: 0,
    step: 0,
    pageCount: 1,
    stepCount: 1
});
requestChangePage(page: targetPage, step: targetStep):void

向服务器发送翻页的请求

// 注意：这里只是发送请求，具体执行操作请在onPageChange的回调之中
bridge.requestChangePage(0, 0);
pushRecord(record: anyData):void

向服务器添加一条当前页的操作记录

// 注意：这里只是发送请求，具体执行操作请在onRecordChange的回调之中
// 此方法可接受任何类型的参数
bridge.pushRecord({
    name: 'click',
    x: '0.123',
    y：'0.123'
});
popRecord():recordRemoved

请求服务器移除栈顶的一条操作记录

bridge.popRecord();
clearRecordStack():void

请求服务器移清空当前页的操作记录，每次页码改变时BJYBridge内部已经将操作记录清空，通常情况下你不会用到这个方法。

bridge.clearRecordStack();
replaceRecordStack():void

全量替换当前的操作记录栈，如果你不需要操作历史记录，请使用replaceRecordStack而非pushRecord。

bridge.replaceRecordStack();

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PPT Demo</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #ddd;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .icon {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            cursor: pointer;
        }

        .icon + .icon {
            margin-left: 30px;
        }

        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 4;
            width: 100%;
        }

        .content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            font-size: 30px;
            color: #666;
        }

        .record {
            flex: 2;
            box-sizing: border-box;
            width: 80%;
            padding: 5px 12px;
            border: 1px solid #999;
            border-radius: 4px;
            overflow: scroll;
            font-size: 12px;
            line-height: 1.25;
            color: #999;
        }

        .footer {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    </style>
</head>
<body>

    <div class='main'>
        <span class="content"></span>
        <span class='record'></span>
    </div>
    <div class='footer'>
        <span class="icon prev"><</span>
        <span class="icon next">></span>
    </div>

    <script src='//live-cdn.baijiayun.com/js-sdk/tool/BJYBridge.js'></script>
    <script>
        // PPT每页内容假数据
        var MOCK_DATA = [
            [
                'Page0-Step0',
                'Page0-Step1',
                'Page0-Step2',
                'Page0-Step3',
                'Page0-Step4'
            ],
            [
                'Page1-Step0',
                'Page1-Step1',
                'Page1-Step2',
            ],
            [
                'Page2-Step0',
                'Page2-Step1',
                'Page2-Step2'
            ],
            [
                'Page3-Step0'
            ],
            [
                'Page4-Step0'
            ],
        ];

        window.onload = function () {
            // PPT内容区域
            var contentElement = document.querySelector('.content');
            // 操作记录区域
            var recordElement = document.querySelector('.record');

            // 获取Bridge单例
            var bridge = BJYBridge.getInstance({
                // 响应由bridge通知而来的翻页指令
                onPageChange: function (page, step) {
                    return new Promise(
                        function (resolve) {
                            var pageData = MOCK_DATA[page];
                            if (pageData) {
                                // 根据具体业务调用翻页的方法
                                contentElement.innerText = pageData[step];
                                // 翻页完成之后，将当前页的步数传递给Promise链
                                resolve(pageData.length);
                            }
                            else {
                                contentElement.innerText = 'Error: Illegal Page';
                            }
                        }
                    );
                },
                // 响应由bridge通知而来的本页操作记录变化
                onRecordChange: function (record, prevRecord) {
                    // 根据具体业务响应操作变化
                    recordElement.innerHTML = record.reverse().join('<br>');
                }
            });

            // 在课件加载完成之后，调用bridge的getReady函数传入初始的页码、步骤、总页数、总步数信息
            // 在实际场景中，此调用可能写在一个PPT加载完成的回调之中
            new Promise(
                function (resolve) {
                    var initData = {
                        page: 0,
                        step: 0
                    };
                    contentElement.innerText = MOCK_DATA[initData.page][initData.step];
                    resolve(initData);
                }
            ).then(
                function (initData) {
                    var page = initData.page;
                    var step = initData.step;
                    bridge.getReady({
                        page: page,
                        step: step,
                        pageCount: MOCK_DATA.length,
                        stepCount: MOCK_DATA[page].length
                    });
                }
            );

            // 向前翻页
            document.querySelector('.icon.prev').addEventListener(
                'click',
                function () {
                    var page = bridge.page;
                    var step = bridge.step;

                    if (--step < 0) {
                        page--;
                        step = 0;
                    }

                    if (page >= 0) {
                        bridge.requestChangePage(page, step);
                    }
                }
            );

            // 向后翻页
            document.querySelector('.icon.next').addEventListener(
                'click',
                function () {
                    var page = bridge.page;
                    var step = bridge.step;

                    if (++step >= bridge.stepCount) {
                        page++;
                        step = 0;
                    }

                    if (page < bridge.pageCount) {
                        bridge.requestChangePage(page, step);
                    }
                }
            );

            // 操作PPT
            recordElement.addEventListener(
                'click',
                function () {
                    bridge.pushRecord(new Date().toString());
                }
            );
        };
    </script>
</body>
</html>

流程说明

H5课件交互流程

image

后进教室如何获取当前页面信息

image

链接格式H5课件集成方式（仅支持小班课）

注意事项

  • 课件内样式避免使用内联样式比如 style="pointer-events: auto; transform-origin: 50% 100%; transform: scaleX(1.1) scaleY(1.1); top: 372px; left: -4px; width: 895px; height: 708px; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; display: inline; user-select: none; background-image: url("%E6%B4%BB%E5%8A%A812-%E6%8D%89%E5%B0%8F%E9%B1%BC.hyperesources/xk3.png"); overflow: visible; z-index: 9;"
  • 课件内避免出现循环动画（无论是js实现的循环还是css）
  • 课件内音视频播放跟同步暂不支持同步
  • 学生后进教室后需要等待30秒同步老师最新课件操作

对于链接格式的H5课件，你只需要做三件事：

  • 课件页面引入以下地址的桥接文件:
https://live-cdn.baijiayun.com/js-sdk/tool/BJYBridge.js
  • 在页面加载完成（onload）后调用以下方法:
var bridge = BJYBridge.getInstance();
bridge.getReady({
    page: 0,
    step: 0,
    pageCount: 1,
    stepCount: 1
});
  • 在百家云后台上传链接课件并关联到教室