3

Since 3.6 WordPress has included MediaElement.js in core. As an example, if you take a look at the video player on the http://mediaelementjs.com homepage you will see that for a portion of the very first second, the player looks slightly different. It seems the styles take about 1 second to load.

Does anyone have an idea why there is a slight delay for the styles to "kick-in"? the video player looks crude/ugly to start with (for roughly 0.5 seconds) - so I would be grateful for any help in understanding why the player looks different to start with.

henrywright
  • 10,070
  • 23
  • 89
  • 150
  • 1
    Could you provide a link for example? –  Aug 28 '13 at 08:24
  • Sure - http://mediaelementjs.com – henrywright Aug 28 '13 at 10:21
  • May the problem comes from the HTML video tag. I mean, your browser put his style on the tag before catching the CSS. Maybe a solution is to set visible the video avec document.ready() no? –  Aug 28 '13 at 11:28
  • How would that be done? could you do it like this? `` – henrywright Aug 28 '13 at 12:16
  • Yep something like this. –  Aug 28 '13 at 12:20
  • I thought that would work too but I just tried it and it doesn't stop the problem :( – henrywright Aug 28 '13 at 12:22
  • try to hide the parent div of the video with CSS, and change it attribute with Jquery after document.ready() –  Aug 28 '13 at 12:24
  • That works on 5 out of 10 page refreshes but it doesn't seem to solve the problem completely? i'm baffled! – henrywright Aug 28 '13 at 13:26
  • By using the profiler of Google chrome i can see everything needed is loaded before document ready is fired. It appears that it's better in Mozilla Firefox after files are in cache. In Internet explorer it fits well. Got the same results? –  Aug 28 '13 at 13:37
  • It is a lot more noticeable in Chrome - although it does happen also in FireFox and IE – henrywright Aug 28 '13 at 18:08
  • 1
    henry, please add more details to the Question, instead of here in Comments. – brasofilo Aug 29 '13 at 16:31

1 Answers1

0

I am unable to reproduce your issue (see it now, really quick for me in chrome only). Have you tried forcing the scripts / css to load in advance of the page?

I have done similar to this with a different problem (likely same root cause). Also had to cache the CSS to make it work: http://www.phpied.com/the-art-and-craft-of-postload-preloads/

I got this from a SO thread but only bookmarked the blog post - found it: Force browsers load CSS before showing the page

Community
  • 1
  • 1
Matthew
  • 9,851
  • 4
  • 46
  • 77
  • The problem with caching the CSS file is it only works on subsequent page loads. I raised the issue on MediaElement's GitHub project log so hopefully the developer can update the script with a solution. Forcing the scripts to load in advance of the page could work but that would need users to visit a page before the page with the video player on it – henrywright Sep 03 '13 at 21:53
  • Yeah - only other thought I had would be to include the relevant styles in your sites' code - but that conjures a host of nightmares about updates. – Matthew Sep 03 '13 at 21:56