产品文档 直播技术文档 直播网页播放器嵌入

概述

本文档主要介绍直播播放器嵌入方式集成,适用于PC网页、移动端H5,对于只需要纯视频直播的客户请参考此文档。

如果已经对接的客户,请主动升级SDK最新稳定版本为0.35.0。

百家云直播平台为客户提供了两种纯视频集成方式:

① 嵌入JS代码的方式 ②嵌入iframe的方式

并且在每个教室/直播间 的后台配置中提供了相应代码;具体位置请见客户账号后台 【云直播】-【直播管理】-【对应具体直播间】-【更多】-【播放器嵌入】

1、 嵌入JS代码的方式

1) 文件引入

强调:js-sdk依赖jquery,请务必先引入jquery文件

引入css文件

<style rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/0.35.0/moduleMin.css"></style>

引入js文件

<script src="//live-cdn.baijiayun.com/js-sdk/0.35.0/moduleMin.js"></script>

引入文件之后将自动生成全局的类window.BJYPlayer

2) 创建根元素

<div id="live-player" style="width: 480px; height: 270px"></div>

3) 初始化

var instance = BJYPlayer.init({
    class: {
        id: '18060537167627'
    },
    env: 'production',
    //账号所处环境,客户统一填写production
    privateDomainPrefix:'xxxxxxxx',
    //专属域名,如果客户有专属域名,则提前专属域名前缀
    sign: '07cbd5276959912d2632444023cbc482',
    //进入直播教室的用户签名
    element: $('#live-player'),
    // 如需选用蓝色主题的播放器,可以指定以下参数,否则可以省略
    theme: 'blue',
    // 如果需要指定移动端H5播放器显示系统原生控制条,传入以下参数,否则可以省略
    showControls: true,
    // 是否支持线路切换,默认为true,否则可以省略
    canSwitchServer: false
});

instance保存了BJYPlayer的实例。

4) 一个完整的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BJYPlayer</title>
    <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/0.35.0/moduleMin.css">
</head>
<body>

<div id="live-player" style="width: 480px; height: 270px"></div>

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="//live-cdn.baijiayun.com/js-sdk/0.35.0/moduleMin.js"></script>
<script>
    BJYPlayer.init({
        class: {
            id: '18060537167627'
        },
        env: 'production',
        //账号所处环境,客户统一填写production
        privateDomainPrefix:'xxxxxxxx',
        //专属域名,如果客户有专属域名,则提前专属域名前缀
        sign: '07cbd5276959912d2632444023cbc482',
        //进入直播教室的用户签名
        element: $('#live-player'),
        // 默认为false, 可省略
        showControls: true,
        // 默认为true,可省略
        canSwitchServer: false
    });
</script>
</body>
</html>

2、 嵌入iframe的方式

直接将后台生成的iframe标签,嵌入页面,用户点击观看页面直接进入到直播间。

<iframe frameborder="0" src="http://tiansujing.at.baijiayun.com/web/room/codePlayer?code=x4wd78&user_name=test&user_number=18799&width=1280&height=720"></iframe>

参数说明:

固定格式

http://${private_domain}.at.baijiayun.com/web/room/codePlayer?//private_domain 为客户站点的专属域名,请按照真实填写

code:普通用户/学生的参加码,必填参数

user_name:用户昵称,非必填,不填写默认生成一个昵称

user_number:用户ID,非必填,不填写默认生成一个ID

如果不指定width和height,播放器将默认撑满iframe容器,通过自行定义iframe的大小,控制播放器在页面的位置。

如需要指定移动端H5播放器显示系统原生控制条,在url后拼接'showControls=true'。

3、 百家云为单播放器提供了一个倒计时页面

此功能为直播正式开始前的倒计时页面,客户可以根据需要进行对接。当时间到了可进入教室的时候,提供一个进入直播的按钮,点击后会默认跳转到单播放器页面。其中url参数会同步到单播放器页面url中。

<iframe frameborder="0" src="http://tiansujing.at.baijiayun.com/web/room/countDown?code=x4wd78&user_name=test&user_number=18799"></iframe>

参数说明:

固定格式

http://${private_domain}.at.baijiayun.com/web/room/countDown?//private_domain 为客户站点的专属域名,请按照真实填写

基础参数

code: 普通用户/学生的参加码,必填参数

user_name: 用户昵称,非必填,不填写默认生成一个昵称

user_number: 用户ID,非必填,不填写默认生成一个ID

扩展参数

enter_url: 设置进入直播跳转url,默认为单播放器页面(需要进行url编码),可设置为客户想要跳转的url

auto_enter: 自动进入,设置为1表示如果课程正在进行,将自动马上跳转,否则需要用户手动点击 默认不自动

is_live: 0-云端课堂 非0-云端直播 默认云端直播

language: english 设置语言为英文 默认中文