Fix lag in video player loading WordPress

Romel Apuya answers:

Hi,

The reason why you have a lag when you click on the video to play,is because
the video isn't streamed. So you need to have that the video is streamed while the website is loading,
but you don't auto play it. To pre-buffer, you have to start playing the file when your html loads, then pause the player.

Graham Kite answers:

The problem could be the page load sequence.
It depends on where the scripts are loading from.
Wordpress loads from the top down, It possibly has to wait until a lot of other scripts load.

Try some of these.
https://browsermob.com/free-website-performance-test
http://gtmetrix.com/
http://www.pagespeed.googlelabs.com
http://www.webpagetest.org

if you are on firefox add yslow and pagespeed. You can also try a cache plugin, but the answer is likely to be in where your scripts load and the order.
Try some of these and look at the minify settings, It should tell you the order of your load and
W3cache or wpminify should be able to give the option of changing the order of your load and also minify your code.


Basically the developer is correct it probably is loading from the bottom. The minify plugin should allow you to change the order and position of where it loads from and also combine the scripts so it only loads a minimal number of scripts. (does not change the actual scripts and code, only the way they render and load.)

PS I didn't see the video either.

ej_emman answers:

try to preload your videos. use some javascript to do this.

Jerson Baguio answers:

try to replace your jwTabs.js with this code just make sure you have a back up copy of your jWtabs.js(function($) {


$.fn.jwTabs = function(options) {

var options = $.extend({
fade : null,
tabTitleReference : null,
interval : null,
startTab : 1,
tabContainerName : 'tab-items'
}, options);

return this.each(function() {

var $this = $(this),
divCount = $this.children('div').length,
tabContainer = '<ul id="' + options.tabContainerName + '">';

$this
.children('div:not(:nth-child(' + options.startTab + '))')
.css('visibility','hidden')
.end()
.hover(function() {
$this.addClass('hovered');
}, function() {
$this.removeClass('hovered');
});

for (var i = 1; i <= divCount; i++) {
if( options.tabTitleReference ) {
var heading = $this
.children('div:nth-child(' + i + ')')
.find(options.tabTitleReference)
.filter(':first')
.text();

if( heading !== '' ) tabContainer += '<li><a href="#" rel="' + i + '">' + heading + '</a></li>';
else tabContainer += '<li><a href="#" rel="' + i + '">' + i + '</a></li>';
}
else tabContainer += '<li><a href="#" rel="' + i + '">' + i + '</a></li>';
};
tabContainer += '</ul>';
$this.prepend(tabContainer);

var $container = $('#' + options.tabContainerName);

$container
.find('li:nth-child(' + options.startTab + ')')
.addClass('tab-selected')
.end()
.find('a')
.click(function() {
var $a = $(this);

var num = $a.attr('rel');
if( $this
.children('div')
.eq(num - 1)
.is(':visible')
) return false; // user is already on selected tab

$container
.find('li.tab-selected')
.removeClass('tab-selected');

$a.parent().addClass('tab-selected');

if( options.fade ) {
$this
.children('div')
.css('visibility','hidden')
.eq(num - 1)
.fadeIn(options.fade);
}

else {
$this
.children('div')
.css('visibility','hidden')
.eq(num -1)
.css('visibility','visibile');
}

return false;
});

// auto change tabs
if( options.interval ) {
var i = options.startTab;

setInterval(function() {

if( !$this.hasClass('hovered') ) {
$container
.find('a')
.eq(i)
.trigger('click');
i++;
if( i === divCount ) i = 0;
}

}, options.interval);
}

}); // end each

}

})(jQuery);