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 一起討論經驗