共计 5305 个字符，预计需要花费 14 分钟才能阅读完成。
html5 直播实例 |h5 微直播项目模板 | 仿陌陌直播 | 仿抖音小视频 / 火山短视频
近两年正是直播井喷时期，被称为直播元年；各个互联网大平台都有布局自己的直播项目，争抢流量红利、不断进行玩法创新。如：陌陌直播、抖音小视频、火山短视频、腾讯微视等等。h5 直播主要在这三种情况下，pc 端、移动端浏览器和微信端，微信端包含微信浏览器和微信小程序。
h5 直播既然这么火，自己也忍不住去开发实践了下，使用 html5+css3+Zepto+swiper+wcPop 等技术混合开发了个 h5 微直播项目 weLiveShow，功能界面有些类似陌陌、火山短视频。
/* 消息提醒轮询函数 —————————————————-*/
// xxx 用户来了
function comingUser(){
var rndObj = [
{name: ‘ 笑笑 ’, level: ‘level01’, levelNum: 12},
{name: ‘ 神仙眷侣♉’, level: ‘level03’, levelNum: 16},
{name: ‘ 大海的声音 ’, level: ‘level05’, levelNum: 20},
{name: ‘ 听风者☋’, level: ‘level02’, levelNum: 15},
{name: ‘ 网瘾少年 ’, level: ‘level03’, levelNum: 16},
{name: ‘ 小宝♥’, level: ‘level05’, levelNum: 20},
{name: ‘ 解脱门♣★’, level: ‘level01’, levelNum: 12}
];
var len = rndObj.length, num = Math.floor(Math.random() * len);
wcTips({
selector: ‘#J__timelyBox’,
id: ‘wcTips1’,
content: ‘<ul class=”clearfix”><li class=”tips wls__bg wls__’ + rndObj[num].level + ‘”><div class=”inner flexbox”><span class=”bg”><i class=”iconfont icon-xingxing”></i><b>’ + rndObj[num].levelNum + ‘</b></span>’ + rndObj[num].name + ‘ 来了 </div></li></ul>’,
anim: ‘fadeInLeftBig’,
time: 5
});
}
// 送礼物提醒
function giveGift(){
var rndObj = [
{avator: ‘img/uimg/u__chat-img02.jpg’, userName: ‘ 笑笑 ’, giftName: ‘ 奖杯 ’, giftImg: ‘img/gift/gift-img001- 奖杯.png’},
{avator: ‘img/uimg/u__chat-img06.jpg’, userName: ‘ 神仙眷侣♉’, giftName: ‘ 金话筒 ’, giftImg: ‘img/gift/gift-img002- 金话筒.png’},
{avator: ‘img/uimg/u__chat-img07.jpg’, userName: ‘ 大海的声音 ’, giftName: ‘ 棒棒糖 ’, giftImg: ‘img/gift/gift-img004- 棒棒糖.png’},
{avator: ‘img/uimg/u__chat-img12.jpg’, userName: ‘ 听风者☋’, giftName: ‘ 幸运草 ’, giftImg: ‘img/gift/gift-img005- 幸运草.png’},
{avator: ‘img/uimg/u__chat-img13.jpg’, userName: ‘ 网瘾少年 ’, giftName: ‘ 我爱你 ’, giftImg: ‘img/gift/gift-img010- 我爱你.png’},
{avator: ‘img/uimg/u__chat-img14.jpg’, userName: ‘ 小宝♥’, giftName: ‘ 恶作剧便便 ’, giftImg: ‘img/gift/gift-img011- 恶作剧便便.png’},
{avator: ‘img/uimg/u__chat-img15.jpg’, userName: ‘ 解脱门♣★’, giftName: ‘ 一支玻尿酸 ’, giftImg: ‘img/gift/gift-img021- 一支玻尿酸.png’}
];
var len = rndObj.length, num = Math.floor(Math.random() * len);
wcTips({
selector: ‘#J__timelyBox’,
id: ‘wcTips2’,
content: ‘<ul class=”clearfix”><li class=”gift”><div class=”flexbox flex-alignc”><img class=”avator” src=”‘ + rndObj[num].avator + ‘” /><div class=”giftdesc flex1 clamp1″><span class=”t1″>’ + rndObj[num].userName + ‘</span><em class=”t2″> 送 主播 ‘ + rndObj[num].giftName + ‘</em></div><img class=”giftimg” src=”‘ + rndObj[num].giftImg + ‘” /></div></li></ul>’,
anim: ‘fadeInBig’,
time: 5
});
}
// 动画礼物提醒
function giveGifGift(){
var rndObj = [
{giftName: ‘ 福到了 ’, giftImg: ‘img/gift/gif/gift-gifimg001.gif’},
{giftName: ‘ 发红包喽 ’, giftImg: ‘img/gift/gif/gift-gifimg002.gif’},
{giftName: ‘ 大白变超人 ’, giftImg: ‘img/gift/gif/gift-gifimg003.gif’},
{giftName: ‘ 浪漫的热气球 ’, giftImg: ‘img/gift/gif/gift-gifimg004.gif’},
{giftName: ‘ 超炫法拉利 ’, giftImg: ‘img/gift/gif/gift-gifimg005.gif’},
{giftName: ‘ 大白鲨 ’, giftImg: ‘img/gift/gif/gift-gifimg006.gif’},
{giftName: ‘ 魔法城堡 ’, giftImg: ‘img/gift/gif/gift-gifimg007.gif’}
];
var len = rndObj.length, num = Math.floor(Math.random() * len);
wcTips({
selector: ‘body’,
id: ‘wcTips3’,
content: ‘<div class=”wls__gift-fullscreen”><div class=”gifGift”><img class=”gifimg” src=”‘ + rndObj[num].giftImg + ‘” /></div></div>’,
shade: true,
anim: ‘zoomInDown’,
time: 10
});
}
/**
* @title 及时消息提示插件
* @Create andy
* @Timer 2018/10/16 15:16:45 GMT+0800 (中国标准时间)
*/
!function(win){
var _doc = win.document, _docEle = _doc.documentElement, index = 0,
util = {
$: function(id){
return _doc.getElementById(id);
},
touch: function(o, fn){
o.addEventListener(“click”, function(e){
fn.call(this, e);
}, !1);
},
// object 扩展
extend: function(target, source){
for(var i in source){
if(!(i in target)){
target[i] = source[i];
}
}
return target;
},
timer: {} // 定时器
},
wcTips = function(options){
var _this = this,
config = {
selector: ‘body’, // 提示框被包围 dom（默认 body）
id: ‘wcTips’, // 提示框 ID 标识（不同的 ID 对应不同的提示框）
content: ”, // 内容
shade: false, // 是否显示遮罩层
anim: ‘fadeIn’, // 具体动画可参考 animate.css [fadeIn – fadeInBig – fadeInUp – fadeInDown – pulse – zoomInDown – zoomInDownSmall]
time: 3, // 设置提示框自动关闭秒数 1、2、3
zIndex: 9999 // 设置元素层叠
};
_this.opts = util.extend(options, config);
_this.init();
};
wcTips.prototype = {
init: function(){
var _this = this, opt = _this.opts, tipbox = null;
util.$(opt.id) ? (tipbox = util.$(opt.id)) : (tipbox = _doc.createElement(“div”), tipbox.id = opt.id);
tipbox.setAttribute(“index”, index);
tipbox.setAttribute(“class”, “wcTips wcTips” + index);
tipbox.setAttribute(“selector”, opt.selector);
tipbox.innerHTML = [
/** 遮罩 */
opt.shade ? (‘<div class=”wctips-mask” style=”z-index:’+(_this.maxIndex()+1)+'”></div>’) : ”,
/** 窗体 */
‘<div class=”wctips-child ‘ + (opt.anim ? ‘anim-‘ + opt.anim : ”) + ‘” style=”z-index:’+(_this.maxIndex()+2)+'”>’+ opt.content +'</div>’
].join(”);
_doc.querySelector(opt.selector).appendChild(tipbox);
this.index = index++;
_this.callback();
},
callback: function(){
var _this = this, opt = _this.opts;
// 自动关闭弹窗
if(opt.time){
util.timer[_this.index] = setTimeout(function(){
exports.close(_this.index);
}, opt.time * 1000);
}
},
// 获取弹窗最大层级
maxIndex: function () {
for (var idx = this.opts.zIndex, elem = _doc.getElementsByTagName(“*”), i = 0, len = elem.length; i < len; i++)
idx = Math.max(idx, elem[i].style.zIndex);
return idx;
}
};
var exports = (function(){
// 实例化插件 (返回 弹窗索引值)
fn = function(args){
var o = new wcTips(args);
return o.index;
};
// 关闭窗口
fn.close = function(index){
var index = index > 0 ? index : 0;
// var o = $(“.wcTips” + index);
var o = _doc.getElementsByClassName(“wcTips” + index)[0];
if(o){
var selector = o.getAttribute(“selector”);
// o.addClass(“wcTips-close”);
o.classList.add(“wcTips-close”);
setTimeout(function(){
// o.remove();
_doc.querySelector(selector).removeChild(o);
clearTimeout(util.timer[index]);
delete util.timer[index];
}, 200);
}
}
return fn;
}());
win.wcTips = exports;
}(window);
欢迎大家一起交流、学习 Q：282310962 wx：xy190310
