UGC三消 一个H5布局的虎牙直播故事

一、官网直播的页面效果

二、虎牙的数据接口文档API

三、后台Controller提供主播及直播数据

package com.xmbl.ops.controller.huya;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.JSONArray;

import com.alibaba.fastjson.JSONObject;

import com.xmbl.ops.controller.base.BaseController;

import com.xmbl.ops.dto.ResponseResult;

import com.xmbl.ops.util.httpclientemailForXmbl.HttpClientUtil;

import com.xmbl.ops.web.api.bean.PageData;

import lombok.extern.slf4j.Slf4j;

@Slf4j

@Controller

@CrossOrigin(maxAge = 3000)

@RequestMapping(value = "api/video")

public class PTHuyaLiveVideoController extends BaseController{

/**

* 获取主播列表

*

* @return

*/

@RequestMapping(value = "/getAnchorList",method = RequestMethod.POST)

@ResponseBody

public ResponseResult getAnchorList() {

log.info("infoMsg:============================== 获取主播列表开始");

Map paramMap = new HashMap<>();

List pdList = new ArrayList<>();

try {

paramMap.put("data", "{\"gid\":4267}");

paramMap.put("appId", "huya_web_303");

paramMap.put("sign", "fbf1b6ad405c56b1efa4571e81ee4b1e");

String result = HttpClientUtil.send("http://open.huya.com/cache.php?m=LiveList&do=getLiveList", paramMap);

log.info("httpClientPost========,{}",result);

JSONObject jsonObject = JSON.parseObject(result);

String data = jsonObject.getString("data");

log.info("data========,{}",data);

JSONObject dataObject = JSON.parseObject(data);

String datas = dataObject.getString("datas");

JSONObject datasObject = JSON.parseObject(datas);

JSONArray array = datasObject.getJSONArray("4267");

log.info("array========,{}",array);

PageData pd = null;

for(Object direct : array) {

pd = new PageData();

JSONObject directInfo = JSON.parseObject(direct.toString());

String nick = directInfo.getString("nick");

String shareUrl = directInfo.getString("shareUrl");

pd.put("nick", nick);

pd.put("shareUrl", shareUrl);

pdList.add(pd);

}

// ResponseBodyResult httpClientPost = HttpClientPostUtil.httpClientPost("http://open.huya.com/cache.php?m=LiveList&do=getLiveList", paramMap);

log.info("infoMsg:============================== 获取主播列表结束");

return successJson(pdList);

} catch (Exception e) {

log.error("infoMsg:============================== 获取主播列表失败");

return errorJson(e.getMessage());

}

}

}

四、web界面的js函数

function getVedioInfolist(){

$.post("api/video/getAnchorList",{},function(data){

console.info(data);

var result = data.result;

var vHtml = "

";

vHtml += "

• ";

for(d in result){

vHtml += "

" + result[d].nick + "";

/* vHtml += "

" + result[d].nick + ""; */

}

vHtml += "

";

vHtml += "

";

$("#table-Anchor").append(vHtml);

$(".videoZoom").attr("src",result[0].shareUrl);

var s = "assets/xmbl/css/anchor-onwer.png";

$("#table-Anchor ul li").eq(0).css("background-image","url(" + s + ")");

$("#table-Anchor ul li").eq(0).find("a").css("color","#9d6b3a");

});

}

function turnVideoZoom(index,url){

console.info(index,url);

//$("#table-Anchor").html("");

//getVedioInfolist();

var s = "assets/xmbl/css/anchor-onwer.png";

var s1 = "assets/xmbl/css/anchor-flow.png";

$("#table-Anchor ul li").not(index).css("background-image","url(" + s1 + ")");

$("#table-Anchor ul li").not(index).find("a").css("color","#FFF");

$("#table-Anchor ul li").eq(index).css("background-image","url(" + s + ")");

$("#table-Anchor ul li").eq(index).find("a").css("color","#9d6b3a");

$(".videoZoom").attr("src",url);

}