- Overview
- Name meaning
- Features
- download and install
- User Guide
- Basic Usage
- Vue framework usage
- Parameter Configuration
- method
- event
- Detailed explanation of source address URL parameters
- Logo settings
- Chapter annotation settings
- Progress bar preview image settings
- Subtitle Settings
- Bullet Chat Settings
- Description of Barrage Server
- Play RTSP stream
- autoplay
- shortcut key
- demo
- Basic Usage
- logoSettings
- Chapter annotation settings
- Progress bar preview image settings
- Subtitle Settings
- bullet chat
- Support protocol format
- comprehensive
This document is created by zwplayer provides
bullet chat
1. Danmu Demo
2. Notes
1. Built-in Danmu UI for sending Danmu: Requires enabling the Danmu server, see Danmu Setup Instructions for details
2. Local Danmu testing: Only for local testing of the
appendDanmuinterface to test Danmu display; does not require a Danmu server.
3. Example Code
The example code is for reference only; please modify according to actual requirements when using.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no">
<title>Danmu Demo</title>
<script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/v3/zwplayer/zwplayer.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.player-wrap {
position: relative;
padding: 20px;
width: 80%;
margin-left: auto;
margin-right: auto;
min-width: 1024px;
}
.vxplayer {
width: 1024px;
height: 576px;
margin: 0 auto;
background-color: #222;
}
.vxplayer-toolbar {
height: 40px;
border: 1px solid #c0c0c0;
margin-top: 20px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 6px 10px;
box-sizing: border-box;
position: relative;
}
.vxplayer-toolbar .btn {
border: 1px solid #a0a0a0;
border-radius: 5px;
min-width: 60px;
height: 26px;
box-sizing: border-box;
margin: 0 5px;
float: left;
}
.vxplayer-toolbar .btn:hover {
background: #b8e1ee;
border-color: #89baf2;
color: #003566;
}
.vxplayer-toolbar .btn:hover {
background: #83aab7;
color: #016789;
border-color: #2c5c81;
}
.url-inputbox {
height: 26px;
display: inline-block;
padding: 0px 10px;
float: left;
font-size: 14px;
}
.url-inputbox .label {
display: inline-block;
width: 120px;
height: 26px;
line-height: 26px;
padding-right: 6px;
text-align: right;
}
.url-inputbox input[type="text"] {
height: 26px;
width: 525px;
border: 1px solid #ccc;
border-radius: 3px;
line-height: 22px;
box-sizing: border-box;
padding-left: 6px;
padding-right: 6px;
}
.vxplayer-toolbar.danmubar {
height: 48px;
background-color: #474343;
padding-left: 200px;
margin-top: 0;
border-top: 0;
border-color: #000;
}
</style>
<script language="javascript">
function onOpenUrl(url) {
if (!window.zwplayer) {
window.zwplayer = new ZWPlayer({
url: url,
playerElm: '#player-holder', //Player element ID, can also be direct DOM object playerDom
autoplay: true,
controlbar: true,
infoButton: true,
speedButton: true,
optionButton: true,
snapshotButton: true,
enableDanmu: true,
sendDanmu: function (text) {
if (typeof window.ws_send === 'function') {
window.ws_send(text);
}
}
});
window.zwplayer.buildDanmuControlbar('player-dammu-controlbar');
} else {
window.zwplayer.play(url, false, false);
}
}
function onload() {
var url = 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4';
setTimeout(function () {
onOpenUrl(url);
}, 100);
window.channelinfo = {
id: '001'
};
(function (root) {
var wsChat = null;
var logView = null;
var wschat_server = "ws://10.234.1.106:3000/"; //Replace with actual Danmu server address
var reconnect = false;
var msg_queue = [];
var force_close = false;
var userCurrent = {};
function chat_log(str) {
console.log(str);
}
function toast(type, msg) {
}
root.ws_init = function chatSocketInit() {
if (wsChat) return wsChat;
// Connect to Web Socket.
// Change host/port here to your own Web Socket server.
try {
wsChat = new WebSocket(wschat_server);
} catch (e) {
return false;
reconnect = false;
}
// Set event handlers.
wsChat.onopen = function () {
chat_log("wsChat onopen");
if (window.enableBalance == '1' && !window.mediaserver) {
root.ws_getmediaserver();
}
window.setTimeout(function () {
delete userCurrent.loginChat;
if (!wsChat) return;
wsChat.send('{type:"hello"}');
if (reconnect) {
toast('showToast', {
text: 'Successfully reconnected to interactive server.',
sticky: false,
stayTime: 3000,
position: 'top-center',
type: 'notice'
});
reconnect = false;
if (msg_queue['userlogin']) {
wsChat.send(msg_queue['userlogin']);
delete msg_queue['userlogin'];
}
}
}, 40);
};
wsChat.onmessage = function (e) {
// e.data contains received string.
chat_log("wsChat onmessage: " + e.data);
if (e.data.length > 0) {
if (e.data.charAt(0) === '{') {
var msgContent;
var msgObj = JSON.parse(e.data);
if (typeof (msgObj) === 'object') {
if (msgObj.text)
msgContent = msgObj.text;
else
msgContent = '';
if (msgObj.type === 'danmu') {
if (window.zwplayer) {
if (msgContent == '') return;
// msgObj.text = msgContent;
window.zwplayer.appendDanmu(msgObj);
}
} else if (msgObj.type === 'hello') {
window.joinRoomOk = true;
//Get assigned UID
window.current_uid = msgObj.uid;
var roomname = 'videoroom_' + window.channelinfo.id;
window.ws_send('{"type":"join","room":"' + roomname + '"}');
} else if (msgObj.type === 'login') {
if (!msgObj.result || msgObj.result != 'success') {
toast('showNoticeToast', 'Login to interactive server was unsuccessful.<br/>Chat interaction may be affected!');
} else {
userCurrent.loginChat = true;
}
} else if (msgObj.type === 'logout') {
//Feedback for user logout
delete userCurrent.loginChat;
} else if (msgObj.type === 'event') {
if (msgObj.event === 'joinroom') {
//Other users and self connecting to chat server
if (msgObj.uid) {
if (msgObj.uid === window.current_uid) {
userCurrent.joinroom = true;
}
}
} else if (msgObj.event === 'leaveroom' || msgObj.event === 'exitroom') {
//Other users leaving chat server
if (msgObj.uid) {
if (msgObj.uid === window.current_uid) {
userCurrent.joinroom = false;
}
}
} else if (msgObj.event === 'login') {
//Other users connecting to chat server
if (msgObj.uid) {
}
} else if (msgObj.event === 'logout') {
//Other users leaving chat server
if (msgObj.uid) {
}
}
} else if (msgObj.type == 'userlist') {
//After connecting to chat server, server immediately pushes online user list, excluding self
if (msgObj.users.length > 1) {
}
} else if (msgObj.type === 'setuserid') {
//Received this event after connection established
window.current_uid = msgObj.uid;
userCurrent.userid = msgObj.uid;
}
}
}
}
};
wsChat.onclose = function () {
chat_log("wsChat onclose");
wsChat = null;
toast('showToast', {
text: 'Connection to interactive server has been disconnected.',
sticky: false,
stayTime: 3000,
position: 'top-center',
type: 'notice'
});
if (force_close) {
} else if (!reconnect) { //If not currently reconnecting, try to reconnect
reconnect = true; //Set to reconnecting state
var on_reconnect = function () {
if (force_close) return;
wschat = root.wschat = root.ws_init();
if (!wschat) {
reconnect = true;
window.setTimeout(on_reconnect, 10000);
}
}
window.setTimeout(on_reconnect, 10000);
}
};
wsChat.onerror = function () {
chat_log("wsChat onerror");
wsChat = null;
};
return wsChat;
}
root.ws_send = function wsChatSend(data) {
chat_log("wsChat send: " + data);
if (wsChat) {
wsChat.send(data);
return true;
} else {
toast('showToast', {
text: 'Chat interaction service failed to connect or has been interrupted!<br/>Trying to reconnect, please try again later...',
sticky: false,
stayTime: 3000,
position: 'top-center',
type: 'warning'
});
reconnect = true;
wschat = root.wschat = root.ws_init();
return false;
}
}
root.ws_queue = function wsQueue(type, msg) {
msg_queue[type] = msg;
}
root.ws_close = function wsChatClose() {
if (wsChat) {
force_close = true;
wsChat.close();
wsChat = null;
} else {
}
}
root.wschat = wsChat;
})(window);
window.ws_init();
}
function onSendDanmu() {
var danmuText = document.getElementById('danmu-box').value;
if (!danmuText)
return;
var danmu = {
//outlineColor: '#f00',
border: '1px solid #ccc',
text: danmuText
};
if (window.zwplayer) {
window.zwplayer.appendDanmu(danmu);
}
}
function onDisableDanmu() {
if (window.zwplayer) {
window.zwplayer.setEnableDanmu(false);
}
}
function onEnableDanmu() {
if (window.zwplayer) {
window.zwplayer.setEnableDanmu(true);
}
}
</script>
</head>
<body onload="onload()">
<div class="player-wrap">
<div class="vxplayer" id="player-holder" style="width: 100%;height: 450px; margin: 0; padding: 0;">
</div>
<div class="vxplayer-toolbar danmubar" id="player-dammu-controlbar"></div>
<div class="vxplayer-toolbar" id="player-dammubar">
<div class="url-inputbox">
<span class="label">Local Danmu Test:</span>
<input type="text" id="danmu-box" value="">
</div>
<button class="btn" onclick="onSendDanmu();">Send Danmu</button>
<button class="btn" onclick="onEnableDanmu();">Enable Danmu</button>
<button class="btn" onclick="onDisableDanmu();">Disable Danmu</button>
</div>
</div>
</body>
</html>
Catalog Navigation