MediaElementPlayer.prototype.buildsubtitles = function(player, controls, layers, media) { var $btns = $([ '', '
', '', '
', '
', '', '
', '
' ].join('')); $btns .appendTo(controls) .on('click', '.mejs-subtitles-button', function() { connectToL2S2() }) .on('click', '.mejs-subtitles-popup-button', function() { var frontend_url = $('.js-subtitles-settings').data('frontend-url'), room = $('.video-wrap').data('subtitles-room-id'); window.open(frontend_url+''+room, 'subtitles-'+room, 'width=1000,height=560'); }); var $lines = $([ '
', '
', '
' ].join('')); $lines.appendTo(layers); }; function connectToL2S2() { var baseurl = $('.js-subtitles-settings').data('primus-url'); if(window.io) { return openSocket(); } $.getScript(baseurl+'primus/primus.js', openSocket); } function openSocket() { var baseurl = $('.js-subtitles-settings').data('primus-url'), room = $('.video-wrap').data('subtitles-room-id'), $lines = $('.mejs-subtitles-lines'); var primus = Primus.connect(baseurl); primus.on('open', function() { primus.emit('join', room); $lines.css({ display: 'block' }); }); // primus.on('lineStart', function(roomId, userId, text) // { // console.log('lineStart', roomId, userId, text); // }); primus.on('line', function(roomId, text, userId, color) { if (text && text.trim().length > 0 && roomId == room) { console.log('line', roomId, userId, text, color); appendLine(text); } }); } function appendLine(line) { var $inner = $('.mejs-subtitles-lines .mejs-subtitles-lines-inner'), $line = $('
').text(line), cnt = 3; $inner .append($line) .find('> div') .slice(0, -cnt) .remove() $line.autoScale(); } $.fn.autoScale = function() { if(!this.data('autoScaleOriginal')) { this.data('autoScaleOriginal', parseInt(this.css('font-size'))); } var maxSize = this.data('autoScaleOriginal'); maxH = this.closest('.mejs-subtitles-lines').innerHeight(), thisH = this.css('font-size', maxSize).outerHeight(); console.log(thisH, maxH, maxSize); while(thisH > maxH && maxSize > 0) { console.log(thisH, maxH, maxSize); thisH = this.css('font-size', --maxSize).outerHeight(); } return this; }