直播项目搁置了将近 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 动画在一些配置低的手机上会有些许卡顿
来源: https://www.cnblogs.com/bbbiu/p/8610922.html