web 直播&礼物赠送------腾讯云(四)

小说:网上赚钱项目靠谱作者:开戏宗通更新时间:2018-11-17字数:22713

武器,装备,功法?血脉,精通,强化?得了别人小说的主角还需要自己去收集,拼命去获得,而唐欣却只需要抽抽奖,碰碰运气就可以了。

奶公牛养殖挣钱

“玄阴星辰大阵!”整个大海当中凭空升起了一个血色大阵和天空之中的血色星象图看起来是一模一样的,以前红衣就将玄阴杀气和星象图融为一体产生玄阴星辰大阵威力惊人无比,但是还是缺少了最后一部分,那就是真元。
那客栈老板搞不明白,为什么这两个大兵告诫他们不要往南京去:“这位长官,南京是国都啊,为什么不能去啊?”

四十九尊傀儡的头上各自冲出一道精气,浓郁的好似要凝固一般,这海量的精气被外面的三十三条真龙吞吐之后,清光结成了一副恍如人身的经络图。这幅经络图之上放出震慑人的威压,好似是一个完全放开气势的决定高手一般。

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 直播&即时聊天------阿里云、融云(三)

 

当前文章:http://zxqss.com/news2018102092574/

发布时间:2018-11-17 10:55:25

为什么你炒股赚不到钱 济南兼职网58同城 写文章兼职 广州星巴克兼职工资 万州兼职最新招聘信息 政府投资项目管理条例 投资致富好项目 5千元以下投资小项目

编辑:戏龙宗邓

我要说两句: (0人参与)

发布