H5聊天室里发布视频代码 聊天上传mp4视频功能实现

效果如下图, 在聊天室里上传一个视频后, 会发布到聊天记录里, 视频是通过ajax上传到了upyun, 成功后, 通过socket推送过来, 然后输出html

实现代码

// 如果消息类型为 video视频, 创建一个video元素
if (keytype == 'video') {
	var saytext_decode = '<video id="myvideo" width="100%" height="240" controls webkit-playsinline="true" playsinline="true" x-webkit-airplay="" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true"><source src="' + decodeURIComponent(saytext) + '" type="video/mp4"></video>';
} else {
    var saytext_decode = decodeURIComponent(saytext);
}
// 输出聊天记录到网页
$('#saylist').append('<div class="media"><div class="media-left"><a><img onclick="userinfo(' + user_id + ')" class="media-object face" src="' + user_avatar + '" data-holder-rendered="true"></a></div><div class="media-body"><div class="saybox"><h4 class="media-heading ' + colorred + '">' + user_nickname + ' ' + gettime() + '</h4><span class="sayspan">' + saytext_decode + '</span></div></div></div>');

视频会预加载, 但是没有自动播放, 经测试兼容IOS和Android,微信,qq,手机浏览器等
websocket使用swoole实现, 看一下相关代码

ws.onmessage = function (event) {
    var obj = jQuery.parseJSON(event.data);
    console.log(obj)
    // 上线消息
    if (obj.keytype == 'online') {
        outputonline(obj.keytext)
    }
    // 离线消息
    if (obj.keytype == 'outline') {
        outputoutline(obj.keytext)
    }
    // 普通消息[图片,文字, 视频]
    if (obj.keytype == 'msg' || obj.keytype == 'video') {
        if (obj.user.userid == {{ user.id }}) {
            outputhtml_self(obj.keytype, obj.keytext, obj.user.userid, obj.user.nickname, obj.user.avatar, obj.juese);
        } else {
            outputhtml(obj.keytype, obj.keytext, obj.user.userid, obj.user.nickname, obj.user.avatar, obj.juese);
        }
        gobottom();//滑动到底部
    }
}

欢迎加QQ 445899710 一起讨论经验