web 直播&礼物赠送------腾讯云（四）

直播项目搁置了将近1年，以为都搁浅了，没想到头头又提起来了，这次直播技术更替为了腾讯云，消息系统没变，采用的依然是融云，新增了礼物赠送功能。

项目完成基本就是这样子：

 

一，播放器

由阿里云转腾讯云，web这边基本没有什么变化，也就是更换个播放器，不过腾讯云直播的效果确实比阿里云强一些（仅从画面上，其他的深层次就不是我能去谈论的了）。

var  tcPlayer = new TcPlayer('tx-video', {
        "m3u8": 'xxx', //请替换成实际可用的播放地址(m3u8)
        "autoplay" : false, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        "live": true,
        "coverpic" : "xxxxxx", //你的封面图片地址
        "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
        "height" : '100%',//视频的显示高度，请尽量使用视频分辨率高度
        "controls": 'none',
        "systemFullscreen": true,
        "x5_player": true,
        "x5_type": "h5",
        "x5_fullscreen": "true"
    });

几点建议：

1. 自动播放建议关闭，这样可以让所有机型保持统一

2. 因为是在微信中做直播，所以要实现全屏效果需要打开X5同层（具体大家可以去搜X5同层协议，这里就不妨传送门了，请原谅我的懒惰）

 

二，关于ios与android区别问题

在wx里，ios与android打开视频同层，ios正常，而android会隐去原本在上方的标题栏，此处处理方式为监听wx给出的事件

<video id=“myVideo".../>

//进入全屏
myVideo.addEventListener("x5videoenterfullscreen", function(){
 
  alert("player enterfullscreen");
 
})

//退出全屏
myVideo.addEventListener("x5videoexitfullscreen", function(){
 
  alert("player exitfullscreen");
 
})
 

然而在项目中，发现并触发不了 - -！

还好有另一个监听：

window.onresize = function(){
 
  myVideo.style.width = window.innerWidth + "px";
 
  myVideo.style.height = window.innerHeight + "px";
 
}

通过这个我们能够监听到屏幕的变化（仅在安卓端判断即可）

 

三，赠送礼物：

赠送礼物考虑到并发问题，最终决定使用融云消息推送，具体如何注册消息，监听消息大家可以查看我之前的随笔。

赠送礼物其实就是点击礼物，通过融云发送礼物消息，里面带着用户信息，用户头像，礼物个数就ok了，是不是很简单，其实里面还是有不少坑的。（可是我们wx端只负责接收，不用做赠送礼物，具体问题就靠小伙伴们自己挖掘啦）！！！

 

四，接收礼物

接收礼物（连击礼物）这里，起先我们是每次用户点击送礼物都会发送一条消息，然后来做反显，最后实现出来后发现其中逻辑比较复杂，在考虑到消息丢失的可能性，最后采用了当礼物连击结束后统一将信息发送给各端来处理。

这里我的处理方式是：

1. 创建一个正在进行动画的队列（限制其中最多只能有3个动画进行）

2. 创建一个等待动画的队列

在消息进来时，判断正在进行动画的队列是否有空的位置，如果有的话则插入，没有的话则放入等待队列（先进先出），在动画队列中的每一条动画结束后去查询等待队列中是否有数据，有的话则插入动画队列。

听着简单，但实现起来还是有一些复杂的，本人代码比较乱，就不贴出来了，有什么问题可以留言，会第一时间回复的。

动画方面建议使用css3，使用js动画在一些配置低的手机上会有些许卡顿。

 

上一篇：

web 直播&即时聊天------阿里云、融云（三）

 

posted on 2018-03-21 10:29  bling_bling  阅读(3366)  评论(7)  编辑  收藏  举报

导航