效果如下图, 在聊天室里上传一个视频后, 会发布到聊天记录里, 视频是通过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 一起讨论经验