h5直播|微直播weLiveShow|视频h5|video直播

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