...
|
...
|
@@ -13,44 +13,44 @@ |
|
|
* manage_replay_chat_msg ===> 通过requestAnimationFrame每帧调用用于判断是否可以展示重播消息和点赞
|
|
|
* replay_barrage_callback_handler ===> 由video的各个事件中调取的callback方法
|
|
|
*/
|
|
|
let prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀
|
|
|
let requestAnimationFrame = window.requestAnimationFrame;
|
|
|
let cancelAnimationFrame = window.cancelAnimationFrame;
|
|
|
|
|
|
let site_url = STATIC_RESOURCE_PATH;
|
|
|
let $btn_play;
|
|
|
let video_width = 375;
|
|
|
let video_height = 667;
|
|
|
let video_id = 'yoho_live'; //视频video标签id
|
|
|
let is_live = true; //是否是直播,根据地址栏参数可以判断
|
|
|
let get_socket_server_url = '/activity/live/barrage'; //获取websocket服务器的接口
|
|
|
let get_replay_chat_url = '/activity/live/replay/barrage'; //获取重播弹幕
|
|
|
let query_arr = []; //地址栏参数数组
|
|
|
let link_type = 'webksocket'; //连接类型
|
|
|
let live_ws; //websocket
|
|
|
let heart_beat_interval; //心跳计时器
|
|
|
let live_time_interval; //播放时间计时器
|
|
|
let live_duration = 0; //播放时间计数器
|
|
|
let now_like_nums = 0; //当前点赞数
|
|
|
let $live_like_pannel; //点赞div,用于存放小脸动画
|
|
|
let is_animate = false; //用于控制动画的频率
|
|
|
|
|
|
let replay_video;
|
|
|
let replay_new_start_time = 1466591331; //根据play进度调整的当前时间,用于获取重播弹幕
|
|
|
let replay_chat_interval = 60; //重播弹幕获取的时间区间长度,接口默认是5分钟
|
|
|
let replay_chat_arr = []; //用于存储重播弹幕obj
|
|
|
let replay_chat_frame_count = 0; //用于计算执行requstAnimationFrames的次数
|
|
|
let is_replay_chat_loading = false; //是否正在调取接口
|
|
|
let can_seek = true; //
|
|
|
let replay_per_like = 0; //平均每秒增加的点赞数
|
|
|
let replay_per_request_like = 0; //平均每帧增加的点赞数(大概)
|
|
|
let replay_video_duration = 0; //重播视频
|
|
|
let replay_now_like = 0; //当前重播的点赞数
|
|
|
let is_wating = false;
|
|
|
|
|
|
let test_count = 99;
|
|
|
|
|
|
let CMD = {
|
|
|
var prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀
|
|
|
var requestAnimationFrame = window.requestAnimationFrame;
|
|
|
var cancelAnimationFrame = window.cancelAnimationFrame;
|
|
|
|
|
|
var site_url = STATIC_RESOURCE_PATH;
|
|
|
var $btn_play;
|
|
|
var video_width = 375;
|
|
|
var video_height = 667;
|
|
|
var video_id = 'yoho_live'; //视频video标签id
|
|
|
var is_live = true; //是否是直播,根据地址栏参数可以判断
|
|
|
var get_socket_server_url = '/activity/live/barrage'; //获取websocket服务器的接口
|
|
|
var get_replay_chat_url = '/activity/live/replay/barrage'; //获取重播弹幕
|
|
|
var query_arr = []; //地址栏参数数组
|
|
|
var link_type = 'webksocket'; //连接类型
|
|
|
var live_ws; //websocket
|
|
|
var heart_beat_interval; //心跳计时器
|
|
|
var live_time_interval; //播放时间计时器
|
|
|
var live_duration = 0; //播放时间计数器
|
|
|
var now_like_nums = 0; //当前点赞数
|
|
|
var $live_like_pannel; //点赞div,用于存放小脸动画
|
|
|
var is_animate = false; //用于控制动画的频率
|
|
|
|
|
|
var replay_video;
|
|
|
var replay_new_start_time = 1466591331; //根据play进度调整的当前时间,用于获取重播弹幕
|
|
|
var replay_chat_interval = 60; //重播弹幕获取的时间区间长度,接口默认是5分钟
|
|
|
var replay_chat_arr = []; //用于存储重播弹幕obj
|
|
|
var replay_chat_frame_count = 0; //用于计算执行requstAnimationFrames的次数
|
|
|
var is_replay_chat_loading = false; //是否正在调取接口
|
|
|
var can_seek = true; //
|
|
|
var replay_per_like = 0; //平均每秒增加的点赞数
|
|
|
var replay_per_request_like = 0; //平均每帧增加的点赞数(大概)
|
|
|
var replay_video_duration = 0; //重播视频
|
|
|
var replay_now_like = 0; //当前重播的点赞数
|
|
|
var is_wating = false;
|
|
|
|
|
|
var test_count = 99;
|
|
|
|
|
|
var CMD = {
|
|
|
LOGIN: 1, //客户端发送登录消息
|
|
|
SEND_MESSAGE: 2, //客户端发送消息
|
|
|
LOGOUT: 3, //客户端发送退出消息
|
...
|
...
|
@@ -66,11 +66,11 @@ let CMD = { |
|
|
};
|
|
|
|
|
|
function set_duration () {
|
|
|
let video = $('.video_player').find('video')[0];
|
|
|
let duration;
|
|
|
let durationH;
|
|
|
let durationM;
|
|
|
let durationS;
|
|
|
var video = $('.video_player').find('video')[0];
|
|
|
var duration;
|
|
|
var durationH;
|
|
|
var durationM;
|
|
|
var durationS;
|
|
|
|
|
|
if (video) {
|
|
|
video.addEventListener('loadedmetadata', function() {
|
...
|
...
|
@@ -103,16 +103,16 @@ function set_duration () { |
|
|
*/
|
|
|
function init_play_button() {
|
|
|
global.$btn_play = $btn_play = $('.live-video-play-button a');
|
|
|
let video_source = $('#video_container').attr('data-video');
|
|
|
var video_source = $('#video_container').attr('data-video');
|
|
|
$btn_play.on('click', function() {
|
|
|
$('#live-watermark').removeClass('hide');
|
|
|
if (live_type === 1 || live_type === 3) {
|
|
|
if ($('#' + video_id)[0] == undefined) {
|
|
|
get_chat_info(); //获取弹幕信息
|
|
|
|
|
|
let _is_ios = true;
|
|
|
let _is_wechat = false;
|
|
|
let agent = navigator.userAgent.toLowerCase();
|
|
|
var _is_ios = true;
|
|
|
var _is_wechat = false;
|
|
|
var agent = navigator.userAgent.toLowerCase();
|
|
|
//判断环境
|
|
|
if (agent.match(/android/i) == 'android') {
|
|
|
_is_ios = false;
|
...
|
...
|
@@ -130,20 +130,20 @@ function init_play_button() { |
|
|
$('.live-video-cover').hide(); //隐藏封面
|
|
|
$('.live-app-download-head-wrap').hide(); //隐藏头部
|
|
|
|
|
|
let temp_height = $(window).height();
|
|
|
let temp_width = $(document).width();
|
|
|
var temp_height = $(window).height();
|
|
|
var temp_width = $(document).width();
|
|
|
if (temp_width > 540) {
|
|
|
temp_width = 540;
|
|
|
}
|
|
|
let scale = 17.1 / 20;
|
|
|
var scale = 17.1 / 20;
|
|
|
// if (temp_height > 30.15 * scale * (temp_width / 320 * 20)) {
|
|
|
// temp_height = 30.15 * scale + 'rem';
|
|
|
// } else {
|
|
|
// temp_height = temp_height + 'px'
|
|
|
// }
|
|
|
|
|
|
let v_width = temp_width + 'px';
|
|
|
let v_height = 32.575 * scale + 'rem';
|
|
|
var v_width = temp_width + 'px';
|
|
|
var v_height = 32.575 * scale + 'rem';
|
|
|
$('.live-loading-container').show(); //显示loading
|
|
|
init_video(video_source, _is_wechat, _is_ios, '100%', '100%');
|
|
|
|
...
|
...
|
@@ -271,7 +271,7 @@ function get_chat_info() { |
|
|
* @param type 参数类型:websocket,tcp,用于获取不同协议的服务器地址
|
|
|
*/
|
|
|
function get_websocket_server(type) {
|
|
|
let param = type;
|
|
|
var param = type;
|
|
|
$.ajax({
|
|
|
url: get_socket_server_url,
|
|
|
data: {
|
...
|
...
|
@@ -282,11 +282,11 @@ function get_websocket_server(type) { |
|
|
success: function(data) {
|
|
|
console.log(data);
|
|
|
if (data.code === 200) {
|
|
|
let arr = data.data[0].split(':');
|
|
|
let ip = arr[0];
|
|
|
let port = arr[1];
|
|
|
let protocol = 'ws'
|
|
|
// let protocol = location.protocol === 'https:' ? 'wss' :'ws'
|
|
|
var arr = data.data[0].split(':');
|
|
|
var ip = arr[0];
|
|
|
var port = arr[1];
|
|
|
var protocol = 'ws'
|
|
|
// var protocol = location.protocol === 'https:' ? 'wss' :'ws'
|
|
|
|
|
|
if (is_live) {
|
|
|
|
...
|
...
|
@@ -304,7 +304,7 @@ function get_websocket_server(type) { |
|
|
* @param port
|
|
|
*/
|
|
|
function link_to_websocket_server(ip, port) {
|
|
|
let path = ip + ':' + port;
|
|
|
var path = ip + ':' + port;
|
|
|
live_ws = new WebSocket(path);
|
|
|
|
|
|
live_ws.onopen = function(event) {
|
...
|
...
|
@@ -328,7 +328,7 @@ function link_to_websocket_server(ip, port) { |
|
|
|
|
|
live_ws.onmessage = function(event) {
|
|
|
if (event.data) {
|
|
|
let msg_obj = JSON.parse(event.data);
|
|
|
var msg_obj = JSON.parse(event.data);
|
|
|
console.log(msg_obj, msg_obj.cmd);
|
|
|
switch (msg_obj.cmd) {
|
|
|
case 4:
|
...
|
...
|
@@ -365,7 +365,7 @@ function get_replay_chat_barrage(start_time, duration) { |
|
|
replay_new_start_time = start_time;
|
|
|
}
|
|
|
is_replay_chat_loading = true;
|
|
|
let ajax = $.ajax({
|
|
|
var ajax = $.ajax({
|
|
|
url: get_replay_chat_url,
|
|
|
data: {
|
|
|
id: live_room,
|
...
|
...
|
@@ -403,7 +403,7 @@ function get_replay_chat_barrage(start_time, duration) { |
|
|
});
|
|
|
|
|
|
//用于测试
|
|
|
/* let test_arr = test_replay(start_time, duration);
|
|
|
/* var test_arr = test_replay(start_time, duration);
|
|
|
test_arr.forEach(function (obj) {
|
|
|
replay_chat_arr.push(obj);
|
|
|
});
|
...
|
...
|
@@ -418,7 +418,7 @@ function get_replay_chat_barrage(start_time, duration) { |
|
|
* 开始
|
|
|
*/
|
|
|
function set_replay_chat_frame() {
|
|
|
let element = $('#live_chat_ul');
|
|
|
var element = $('#live_chat_ul');
|
|
|
requestAnimationFrame(manage_replay_chat_msg);
|
|
|
}
|
|
|
|
...
|
...
|
@@ -430,7 +430,7 @@ function manage_replay_chat_msg() { |
|
|
|
|
|
if (replay_video != undefined) {
|
|
|
if (!replay_video.paused && !is_wating) {
|
|
|
let time = parseInt(replay_video.currentTime);
|
|
|
var time = parseInt(replay_video.currentTime);
|
|
|
if (!isNaN(replay_video.duration) && replay_video.duration != 0) {
|
|
|
if (replay_video_duration === 0) {
|
|
|
replay_video_duration = replay_video.duration;
|
...
|
...
|
@@ -448,20 +448,20 @@ function manage_replay_chat_msg() { |
|
|
|
|
|
if (replay_now_like - now_like_nums >= 1) {
|
|
|
now_like_nums = parseInt(replay_now_like);
|
|
|
let msg = '{"cmd":9,"msg":' + now_like_nums + ',"room":' + live_room + ',"uid":1}';
|
|
|
let msg_obj = JSON.parse(msg);
|
|
|
var msg = '{"cmd":9,"msg":' + now_like_nums + ',"room":' + live_room + ',"uid":1}';
|
|
|
var msg_obj = JSON.parse(msg);
|
|
|
insert_like(msg_obj);
|
|
|
}
|
|
|
} else if (replay_video.currentTime < 10) {
|
|
|
let msg = '{"cmd":9,"msg":0,"room":' + live_room + ',"uid":1}';
|
|
|
let msg_obj = JSON.parse(msg);
|
|
|
var msg = '{"cmd":9,"msg":0,"room":' + live_room + ',"uid":1}';
|
|
|
var msg_obj = JSON.parse(msg);
|
|
|
insert_like(msg_obj);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (replay_chat_arr.length > 0) {
|
|
|
let obj = replay_chat_arr[0];
|
|
|
var obj = replay_chat_arr[0];
|
|
|
if (obj.create_time <= time) {
|
|
|
if (obj.cmd == 5) {
|
|
|
insert_msg(obj)
|
...
|
...
|
@@ -542,7 +542,7 @@ function replay_barrage_callback_handler(time, v_type) { |
|
|
* @returns {string}
|
|
|
*/
|
|
|
function get_cmd(cmd) {
|
|
|
let result = '';
|
|
|
var result = '';
|
|
|
switch (cmd) {
|
|
|
case 1:
|
|
|
result = '{"cmd":' + cmd + ',"uid":"","name":"","avatar":"","room":' + live_room + '}';
|
...
|
...
|
@@ -570,10 +570,10 @@ function send_heart_beat() { |
|
|
*/
|
|
|
|
|
|
function insert_msg(obj) {
|
|
|
let $ul = $('#live_chat_ul');
|
|
|
let msg_html
|
|
|
var $ul = $('#live_chat_ul');
|
|
|
var msg_html
|
|
|
if (obj.avatar == '' || obj.avatar == undefined) {
|
|
|
let rand = Math.floor(Math.random() * 5) + 1;
|
|
|
var rand = Math.floor(Math.random() * 5) + 1;
|
|
|
// obj.avatar = site_url + '/img/activity/live/live/head_' + rand + '.png';
|
|
|
|
|
|
msg_html = '<div class="live-item2"><div class="live-item2-head">' +
|
...
|
...
|
@@ -606,7 +606,7 @@ function insert_msg(obj) { |
|
|
'</div>' +
|
|
|
'</div>';
|
|
|
}
|
|
|
let li = document.createElement('li');
|
|
|
var li = document.createElement('li');
|
|
|
li.innerHTML = msg_html;
|
|
|
if ($ul.children().length >= 4) {
|
|
|
$ul.find('li').eq(0).remove();
|
...
|
...
|
@@ -620,9 +620,9 @@ function insert_msg(obj) { |
|
|
*/
|
|
|
function insert_user(obj) {
|
|
|
if (obj.name.length > 1) {
|
|
|
let $ul = $('#live_chat_ul');
|
|
|
let msg_html = '<div class="live-item1">' + '@' + obj.name + ' <span>已加入</span>' + '</div>';
|
|
|
let li = document.createElement('li');
|
|
|
var $ul = $('#live_chat_ul');
|
|
|
var msg_html = '<div class="live-item1">' + '@' + obj.name + ' <span>已加入</span>' + '</div>';
|
|
|
var li = document.createElement('li');
|
|
|
li.innerHTML = msg_html;
|
|
|
if ($ul.children().length >= 4) {
|
|
|
$ul.find('li').eq(0).remove();
|
...
|
...
|
@@ -638,7 +638,7 @@ function insert_user(obj) { |
|
|
* @param obj
|
|
|
*/
|
|
|
function insert_like(obj) {
|
|
|
let num = obj.msg.toString();
|
|
|
var num = obj.msg.toString();
|
|
|
|
|
|
if (num.indexOf('万') < 0) {
|
|
|
num = parseInt(num);
|
...
|
...
|
@@ -651,15 +651,15 @@ function insert_like(obj) { |
|
|
} else {
|
|
|
if (!is_animate) {
|
|
|
is_animate = true;
|
|
|
let like_rand = Math.floor(Math.random() * 3) + 1;
|
|
|
let img_rand = Math.floor(Math.random() * 5) + 1;
|
|
|
let img_path = site_url + '/img/activity/live/live/like_icon' + img_rand + '.png';
|
|
|
let id = 'js_keyframes_' + Math.random();
|
|
|
let like_class = 'like-icon' + ' scroll_animate_' + like_rand;
|
|
|
let msg_html = '<img src="' + img_path + '">';
|
|
|
var like_rand = Math.floor(Math.random() * 3) + 1;
|
|
|
var img_rand = Math.floor(Math.random() * 5) + 1;
|
|
|
var img_path = site_url + '/img/activity/live/live/like_icon' + img_rand + '.png';
|
|
|
var id = 'js_keyframes_' + Math.random();
|
|
|
var like_class = 'like-icon' + ' scroll_animate_' + like_rand;
|
|
|
var msg_html = '<img src="' + img_path + '">';
|
|
|
|
|
|
|
|
|
let anim_div = document.createElement('div');
|
|
|
var anim_div = document.createElement('div');
|
|
|
anim_div.id = id;
|
|
|
anim_div.className = like_class;
|
|
|
anim_div.innerHTML = msg_html;
|
...
|
...
|
@@ -695,9 +695,9 @@ function insert_audience(obj) { |
|
|
* @param obj
|
|
|
*/
|
|
|
function insert_end(obj) {
|
|
|
let user_num = obj.audienceNums.toString();
|
|
|
let like_num = obj.likeNums.toString();
|
|
|
let video_len = obj.videoLen.toString();
|
|
|
var user_num = obj.audienceNums.toString();
|
|
|
var like_num = obj.likeNums.toString();
|
|
|
var video_len = obj.videoLen.toString();
|
|
|
|
|
|
if (user_num.indexOf('万') < 0) {
|
|
|
user_num = parseInt(user_num);
|
...
|
...
|
@@ -715,7 +715,7 @@ function insert_end(obj) { |
|
|
like_num = (like_num / 10000).toFixed(1) + '万';
|
|
|
}
|
|
|
|
|
|
let video = $('#' + video_id)[0];
|
|
|
var video = $('#' + video_id)[0];
|
|
|
if (video) {
|
|
|
setTimeout(function() {
|
|
|
video.pause();
|
...
|
...
|
@@ -724,7 +724,7 @@ function insert_end(obj) { |
|
|
}
|
|
|
live_ws.close();
|
|
|
clearInterval(live_time_interval);
|
|
|
let $liveEnd = $('#live-state-end');
|
|
|
var $liveEnd = $('#live-state-end');
|
|
|
$liveEnd.show();
|
|
|
$liveEnd.find('.audience .val').text(user_num);
|
|
|
$liveEnd.find('.duration .val').text(video_len);
|
...
|
...
|
@@ -751,7 +751,7 @@ function receive_init(obj) { |
|
|
*/
|
|
|
function get_live_time() {
|
|
|
if (live_start_time) {
|
|
|
let date = new Date();
|
|
|
var date = new Date();
|
|
|
live_duration = parseInt(date.getTime() / 1000) - live_start_time;
|
|
|
console.log('live_duration=' + live_duration);
|
|
|
$('#live_time').text(get_time_text(live_duration));
|
...
|
...
|
@@ -765,10 +765,10 @@ function get_live_time() { |
|
|
* @returns {string}
|
|
|
*/
|
|
|
function get_time_text(time) {
|
|
|
let time_text = '00:00:00';
|
|
|
let sec;
|
|
|
let min;
|
|
|
let hour;
|
|
|
var time_text = '00:00:00';
|
|
|
var sec;
|
|
|
var min;
|
|
|
var hour;
|
|
|
if (time < 0) {
|
|
|
time = 0;
|
|
|
}
|
...
|
...
|
@@ -794,7 +794,7 @@ function get_time_text(time) { |
|
|
} else {
|
|
|
hour = hour + ':';
|
|
|
}
|
|
|
let rests = time % 3600;
|
|
|
var rests = time % 3600;
|
|
|
min = (rests - rests % 60) / 60;
|
|
|
if (min < 10) {
|
|
|
min = '0' + min;
|
...
|
...
|
@@ -826,10 +826,10 @@ function set_interval_time() { |
|
|
* requestAnimationFrame
|
|
|
*/
|
|
|
function init_request_animation_frames() {
|
|
|
let lastTime = 0;
|
|
|
let prefix;
|
|
|
var lastTime = 0;
|
|
|
var prefix;
|
|
|
//通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
|
|
|
for (let i = 0; i < prefixes.length; i++) {
|
|
|
for (var i = 0; i < prefixes.length; i++) {
|
|
|
if (requestAnimationFrame && cancelAnimationFrame) {
|
|
|
break;
|
|
|
}
|
...
|
...
|
@@ -841,10 +841,10 @@ function init_request_animation_frames() { |
|
|
//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout
|
|
|
if (!requestAnimationFrame || !cancelAnimationFrame) {
|
|
|
requestAnimationFrame = function(callback) {
|
|
|
let currTime = new Date().getTime();
|
|
|
var currTime = new Date().getTime();
|
|
|
//为了使setTimteout的尽可能的接近每秒60帧的效果
|
|
|
let timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
|
let id = window.setTimeout(function() {
|
|
|
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
|
var id = window.setTimeout(function() {
|
|
|
callback(currTime + timeToCall);
|
|
|
}, timeToCall);
|
|
|
lastTime = currTime + timeToCall;
|
...
|
...
|
@@ -893,8 +893,8 @@ $(document).ready(function() { |
|
|
});
|
|
|
|
|
|
global.test = function test() { //测试弹幕样式
|
|
|
let rand = Math.floor(Math.random() * msg_obj.length);
|
|
|
let obj = JSON.parse(msg_obj[rand].toString());
|
|
|
var rand = Math.floor(Math.random() * msg_obj.length);
|
|
|
var obj = JSON.parse(msg_obj[rand].toString());
|
|
|
switch (obj.cmd) {
|
|
|
case 4:
|
|
|
insert_user(obj);
|
...
|
...
|
@@ -906,21 +906,21 @@ global.test = function test() { //测试弹幕样式 |
|
|
}
|
|
|
|
|
|
global.test_like = function test_like() {
|
|
|
let rand = Math.floor(Math.random() * 5);
|
|
|
var rand = Math.floor(Math.random() * 5);
|
|
|
test_count += rand;
|
|
|
let obj_text = '{"cmd":9,"msg":' + test_count + ',"room":' + live_room + ',"uid":0}';
|
|
|
let obj = JSON.parse(obj_text);
|
|
|
var obj_text = '{"cmd":9,"msg":' + test_count + ',"room":' + live_room + ',"uid":0}';
|
|
|
var obj = JSON.parse(obj_text);
|
|
|
insert_like(obj);
|
|
|
}
|
|
|
|
|
|
global.test_replay = function test_replay(starttime, timeinterval) {
|
|
|
let start = starttime - live_start_time;
|
|
|
let end = start + timeinterval;
|
|
|
let test_arr = [];
|
|
|
var start = starttime - live_start_time;
|
|
|
var end = start + timeinterval;
|
|
|
var test_arr = [];
|
|
|
if (replay_msg.length > 0) {
|
|
|
for (let i = 0; i < replay_msg.length; i++) {
|
|
|
let obj = replay_msg[i];
|
|
|
let create_time = parseInt(obj.createtime);
|
|
|
for (var i = 0; i < replay_msg.length; i++) {
|
|
|
var obj = replay_msg[i];
|
|
|
var create_time = parseInt(obj.createtime);
|
|
|
if (create_time >= start && create_time <= end) {
|
|
|
test_arr.push(obj);
|
|
|
}
|
...
|
...
|
|