直播項目擱置了將近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 直播&即時聊天------阿里雲、融雲（三）