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

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<String, String> paramMap = new HashMap<>();
           List<PageData> 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<PostMethodResponse> 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 = "<div style=\"color:#9c77f3;padding-top:10px;font-size:16px;\">全部主播</div>";
           vHtml += "<ul>";
           for(d in result){
                vHtml += "<li><a data-index=\"" + d + "\" onclick=\"turnVideoZoom('" + d + "','" + result[d].shareUrl + "');\" style=\"text-align: center;\" data-info=\" " + result[d].shareUrl + " \">" + result[d].nick + "</a></li>";
                /* vHtml += "<li><a onclick=\"turnVideoZoom('"+result[d].shareUrl+"');\" style=\"text-align: center;\" data-info=\" + " + result[d].shareUrl + " + \">" + result[d].nick + "</a></li>"; */
           }
           vHtml += "</ul>";
           vHtml += "<div>" +
                           "<image src=\"assets/xmbl/css/anchor-under.png\" style=\"padding-top:15px;\" />"
                     "</div>";
           $("#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);
}