-
I want to use cloudfalre roacket loader on my entire site, but not on flowplayer. which is why I added a fucntion to bypass cloudfalre on flowplayer.min.js
data-cfasync=”false” with a fucntion.
Now the issue is when I enable the rocket loader after adding data-cfasync=”false” it doesnt plays the video and gives an error.
Uncaught ReferenceError: and points the file flowplayer.min.js .How to I fix this.
-
-
Hello xuhaibkhan,
what is the error which you get when you use Rocker Loader also for FV Player script?
What is the exact error which you get when you add that data-cfasync=”false” ?
Are you sure that file is flowplayer.min.js and not fv-flowplayer.min.js ? flowplayer.min.js only loads if you use SCRIPT_DEBUG in your wp-config.php. In that case all the FV Player JS modules load one by one and you would have to set that cfasync=”false” to many other scripts – all of wp-content/plugins/fv-wordpress-flowplayer/flowplayer/modules
Thanks,
MartinWhat I am trying to do is to use cloudfalre RocketLoader on entire site and all JS files, But since Flowplayer loads at the end of the page, I want to use data-cfasync=”false” for Flowplayer, so It doesnt go though clodufalre RocketLoader.
I wrote a function which adds data-cfasync=”false to id=flowplayer-js> (../fv-wordpress-flowplayer/flowplayer/fv-flowplayer.min.js)
I can see in console that it does not go though Cloudflare RocketLoader, But then the video Player Breaks and gives Uncaught ReferenceErrors pointing to file fv-flowplayer.min.js.
On searching I found jQuery needs to go first, so I have added data-cfasync=”false” to (..js/jquery/jquery.min.js’ id=jquery-core-js ) File.
I am not sure If I am able to explain the issue. But all I want is to have cloudflare rocketloader on all site, but not on video player, so it plays/loads videos fast. With Rocketloader its slow as it has to wait for the entire page to load.
Hello xuhaibkhan,
it makes sense to load the script asynchronously even if it loads in footer. We have prepared our own asynchronous loading for the upcoming FV Player 7.5 release too. That way our users will benefit from greater Google PageSpeed scores without having to do anything.
The primary motivation is that the plugin which does this properly is WP Rocket. And why should FV Player users pay for that plugin to ensure optimized JavaScript loading?
So I would recommend you just use RocketLoader for everything for now. If there is any error, please share it with us with the full error trace from the browser console. Just “Uncaught ReferenceError” is not enough.
Thanks,
MartinHere is the error in console.
Uncaught ReferenceError: fv_flowplayer_translations is not defined
at fv-flowplayer.min.js:1
at fv-flowplayer.min.js:1
at Array.forEach (<anonymous>)
at fv-flowplayer.min.js:1
at HTMLDivElement.s (fv-flowplayer.min.js:1)
at HTMLDivElement.c (rocket-loader.min.js:1)
at Object.e.trigger (fv-flowplayer.min.js:1)
at r (fv-flowplayer.min.js:1)
at HTMLDivElement.<anonymous> (fv-flowplayer.min.js:1)
at Function.each (jquery.min.js:2)and
Uncaught ReferenceError: fv_flowplayer_translations is not defined
at fv-flowplayer.min.js:1
at HTMLDivElement.s (fv-flowplayer.min.js:1)
at HTMLDivElement.c (rocket-loader.min.js:1)
at Object.e.trigger (fv-flowplayer.min.js:1)
at d (fv-flowplayer.min.js:1)
at HTMLDivElement.u (fv-flowplayer.min.js:1)
at HTMLDivElement.c (rocket-loader.min.js:1)Hello xuhaibkhan,
these are the translations which are stored as inline scripts using wp_localize_script() which is WordPress core standard. So RocketLoader would have to be configured to not optimize inline scripts.
It using data-cfasync=”false” is the only way, then it’s not going to be so easy though, but in general any inline scripts are safe to skip from optimization.
I would recommend to figure out why FV Player won’t work with RocketLoader, if that’s the case.
Thanks,
MartinHere is the fucntion .
function add_cfasync_attribute($tag, $handle) { // add script handles to the array below $scripts_to_cfasync = array('jquery-core','flowplayer'); foreach($scripts_to_cfasync as $async_script) { if ($async_script === $handle) { return str_replace(' src', ' data-cfasync="false" src', $tag); } } return $tag; } add_filter('script_loader_tag', 'add_cfasync_attribute', 10, 2);What it does is add (data-cfasync=”false”) to Jquery and flowplayer.min file so they pass though cloudflare rocketloader.
What I am trying to do here is to bypass Cloudflare rocketloader for those files so video players loads and and auto plays video right aways, and rest page can be loaded with rocketloader.
The issue is when I enable rocketloader on enitre site, the video player wont play until the entire page has loaded, and if I stops the clouddflare the video player loads fasts, but other content on page gets slow, so I am just trying to find a way where I can bypass ROcketLoader for flowplayer so It stays fast,
Hello xuhaibkhan,
please check the “3. Filter the tags to add data-cfasync attribute when needed” answer here: How to add extra attributes to the script tag added via wp_localize_script() – wordpress.stackexchange.com
They are dealing exactly with data-cfasync=”false”.
Thanks,
Martin
