直播项目搁置了将近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动画在一些配置低的手机上会有些许卡顿。
上一篇：