集成web播放端

此教程帮助用户集成web播放端,库会自动根据平台(pc/phone)自动选择播放器。调用此接口时需要在后台生成一个token传入。并且token必须是room级别,否则播放器无法找到对应的直播室

说明:
    1、ios环境下非微信浏览器打开时视频会全屏播放,此为ios系统限制。
    2、android环境下有些定制系统偶尔会出现全屏播放,可以清缓存再试试。
    3、一个token只能用在一个播放端

1. 流程参考

Web接入流程

2. 集成指南

js现版本提供两个功能: 1. 视频播放 2. 聊天室功能

2.1 视频播放器 (v2)

用户可以在自己的页面中集成web播放端,库会自动根据平台(pc/phone)自动选择播放器,pc上使用flash,手机上使用系统自带video。此版本与1.x版本接口不兼容,接口更简洁。
调用此接口时需要在后台生成一个token传入。并且token必须是room级别,否则播放器无法找到对应的直播室。

说明:
    1、ios环境下非微信浏览器打开时视频会全屏播放,此为ios系统限制。
    2、android环境下有些定制系统偶尔会出现全屏播放,可以清缓存再试试。
    3、一个token只能用在一个播放端
    4、播放器自带断网重播功能

2.1.1集成播放端V2

1.导入js库

导入js库。 可以将该文件引用至本地,进行调用

<script src="http://media.livevip.com.cn/web_lib/js/live.player_2.0.js"></script>
<!-- 备注: 如果导入此库,live.core可以不用引入 -->
2.示例代码
<!-- 最小集成code -->
var opts = {
        "playerId": "gotyeplayer",
        "width": "330",
        "height": "180"
};
<!-- token请调用后台接口生成 -->
var player = new Gotye.Player(token, opts);
<!-- playerWapper为div的id -->
player.appendTo("playerWapper");

2.1.2 接口文档

1.基础接口

1).创建player播放器

var opts =  {
    "playerId" : "gotyeswf", //生成视频dom对象id,可为空,默认为gotyeswf
    "width" : "100%", //视频宽,如 '600px' 或者 '50%', 默认'100%'
    "height" : "100%", //视频高,如 '400px' 或者 '50%', 默认'100%'
    "autoplay" : true, //默认true,是否自动播放
    "defFlv" : false, //默认false,为rtmp协议
    "forceLogoutMsg" : "Your token is used elsewhere",//被踢下线通知
    "showLoading":1 //swf播放器是否显示加载动画; 默认显示; 1-显示 0-不显示.
    "swfPlayerPath":"" //设置swf播放器地址,如果页面中播放器显示太小,flash限制会出现播放按钮,此时需要用户把swf下载到自己服务器,保证与页面同域
};
var player = new Gotye.Player(token, opts);

2).添加播放器到页面容器上

player.appendTo(containerId);
2.监听事件

监听事件必须在调用appendTo之前添加,否则 会有时序问题

1).播放器加载完成 事件

player.onFinish(function(){
    Tool.info("播放器加载成功");
});

2).监听播放端人数变动

player.onPlayUserChange(function(count,virCount){
    Tool.info("当前观看人数为:"+count);
    Tool.info("当前人数模拟值为(生成规则请见管理后台房间配置):"+virCount);
});

3).监听主播端推流状态

player.onPubStatusChange(function(status){
    Tool.info("主播端推流状态:"+status);
});

4).监听被踢下线通知

player.onForceLogout(function(){
    Tool.info("您已经被踢出");
});
3.操作接口

1).恢复播放

player.play();

2).暂停播放

layer.pause();

3).音量调整

<!-- 此接口手机端无效,请使用video默认控制 -->
<!-- vol 默认1,为100%。 最小为0;最大值为3,300%;-->
player.setVol(vol);

2.1.3 html集成demo代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>live-player</title>
<script src="http://media.livevip.com.cn/web_lib/js/live.player_2.0.js"></script>
</head>
<body>
    <div id="playerWapper"
        style="background-size: 100%; width: 100%; height: 100%;"></div>
</body>
<script type="text/javascript">
    window.onload=function(){
        //1.从cookie取token
        //2-1.如果没有,就调用接口AccessToken生成一个token并且保存到cookie中,一天之内可重复使用。注意: 不同房间,token不同。
        //2-2.如果有,就直接取cookie中的token
        var opts = {
            "playerId": "gotyeplayer",
            "width": "330",
            "height": "180"
        };
        var player = new Gotye.Player(token, opts);
        player.onPlayUserChange(function(count) {
            Tool.info("当前观看人数为:" + count);
        });
        player.appendTo("playerWapper");
    }
</script>
</html>

2.2 聊天室

h5聊天示例页面: http://gotlive.com.cn/live/chat/index.jsp?token= 注: token 请调用后台api接口生成

2.2.1 引用js库到页面

http://media.livevip.com.cn/web_lib/js/live.player_2.0.js

备注: 1.3 表示当前版本

2.2.2 初始化

var Live = new Gotye.Live(token);
//token 请调用后台接口生成

    Live.login(function(user) {
    alert("login success");
    //注意,监听事件一定要在登陆回调成功之后添加
    Live.onMsg(function(msg){
        alert(msg.text);
    });

    Live.onForceLogout(function(){
        alert("您的账号在其它地方登陆");
    });

    Live.onKilled(function(){
        alert("您已被管理员踢出");
    });
},function(code){
    if(Gotye.Code.REQUEST_TIMEOUT==code){
        Tool.info("登陆超时,系统重试中");
    }else if(Gotye.Code.HAS_BEEN_KILLED==code){
        Tool.info("你已被管理员禁止登陆");
    }
 });

2.2.3 登陆

登陆
接口: login(server,succCall,failCall);
说明: 登陆到服务器
参数:
* server (String) : 服务器名。默认chat
* succCall(Function): 发送成功后的回调
* failCall(Function): 发送失败后的回调

Live.login(function(user) {
    alert("login success");
},function(){
    alert("login fail");
});

重复登陆通知

接口: onForceLogout(callback);
说明: 重复登陆后,之前的会话会被踢下线

2.2.4 消息收发

发送消息

接口: sendMsg(data,callback);
说明: 发送消息。其中type服务端不做判断。直接转发。
参数:

    * data(Object): 请求数据

        {
            "recvId": "" //接收者帐号,为空表示发送给所有人
            "type":1, // 1-文本  3-通知
            "text":"", //消息内容
            "extra":"" //附加字段
        }

    * callback(Function): 回调
监听消息

接口: onMsg(callback);
说明: 监听消息
参数:

    * callback(Function): 回调 
        回调对象: 
            {
                "sendId": "" //发送者帐号
                "sendName": "" //发送者名称
                "type":1, // 1-文本
                "text":"", //消息内容
                "extra":"" //附加字段
            }


    例子:
        Live.onMsg(function(msg){
            alert(msg.text);
        });

2.2.5 禁言操作

被禁用通知

接口: onKilled(callback); 说明: 被禁用后的回调

2.2.6 常量

通信状态码
Gotye.Code = {
    SUCCESS : 200, // 成功
    FAIL : 300, // 失败
    INVALID_TOKEN : 401, // 无效token
    INVALID_TOKEN_ROLE : 403, // 无效角色,只有聊天室role可以登陆
    SYS_EXCEPTION : 500, // 系统异常
    NO_OPER_PERMISSION : 1001, // 无操作权限
    DISABLE_SPEAK : 1003, // 已被禁言
    CONENT_IS_NULL : 1005, // 消息内容和附加字段都为空
    INVAILD_TARGET_ID : 1007, // 无效TARGET_ID
    HAS_BEEN_KILLED : 1009// 已经被禁止登陆
}

2.3 存档

2.3.1 播放器v1.3

2.3.1.1 导入js库 #
http://media.livevip.com.cn/web_lib/js/live.player_1.3.js

备注: 如果导入此库,live.core可以不用引入
2.3.1.2 初始化
Gotye.Player.init(token/**认证token**/);
备注:一个token只能用在一个播放端
2.3.1.3 配置信息

一定要在createVideo调用之前执行

var config = {
    "autoplay": true, //默认true ,指定微信浏览器下是否自动播放
    "forceLogoutMsg":'<font color="red">您已被踢出</font>', //被踢下线通知
    "defFlv":false, //默认false ,为rtmp协议。flv需要开通,可联系技术支持。
    "bg":"", //默认为官方图片 ,指定移动web播放器背景图片
    "controls":true //默认false ,指定移动端浏览器上是否显示控制条
}
Gotye.Player.config(config);
2.3.1.4 监听事件

监听事件必须在创建视频播放器之前调用,否则不一定会生效

a).播放器加载成功之后的回调
    Gotye.Player.onFinish(function(){
    Tool.info("播放器加载成功");
    });
b).监听播放端人数变动
    Gotye.Player.onPlayUserChange(function(count){
    Tool.info("当前观看人数为:"+count);
    });
c).监听主播端推流状态
    Gotye.Player.onPubStatusChange(function(status){
    Tool.info("主播端推流状态:"+status);
    });
2.3.1.5 创建视频player
    * parentId: 容器id ,必须项
    * videoId: 生成视频dom对象id,可为空,默认为gotyeswf
    * width:视频宽,如 '600px' 或者 '50%', 默认'100%'
    * height: 视频高,如 '400px' 或者 '50%', 默认'100%'
    * swfUrl: flash播放器地址,默认为系统自带
    Gotye.Player.createVideo(parentId, videoId, width, height, swfUrl);
2.3.1.6 demo代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>live-player</title>
<script src="http://media.livevip.com.cn/web_lib/js/live.player_1.3.js"></script>
</head>
<body>
    <div id="playerWapper"
        style="background-size: 100%; width: 100%; height: 100%;"></div>
</body>
<script type="text/javascript">
    window.onload=function(){
        //1.从cookie取token
        //2-1.如果没有,就调用接口AccessToken生成一个token并且保存到cookie中,一天之内可重复使用。注意: 不同房间,token不同。
        //2-2.如果有,就直接取cookie中的token
        Gotye.Player.init(token);
        Gotye.Player.onPlayUserChange(function(count){
            Tool.info("当前观看人数为:"+count);
        });
        Gotye.Player.createVideo("playerWapper", "gotyeswf" ,"650px","450px");
    }
</script>
</html>
返回顶部