Foliovision

Main navigation

Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

    Troubleshooting Javascript Errors

    Intro

    If you notice an issue with our player and you see a JavaScript error on the browser Developer Tools console, it doesn’t automatically mean the fault is in our plugin. Some of the JavaScript errors are so severe that they just stop any other JavaScript from working. In that case you need to troubleshoot your website.

    Here is our down-to-basics approach to it which we use to troubleshoot sites where we have little access with minimal resources and maximum speed.

    Troubleshooting steps

    Here are the steps we use to troubleshoot JavaScript issues on any site. It requires good understanding of HTML and some troubleshooting skills. If you are unsure about that, check our general troubleshooting instructions.

    Update: You might also just use the browser overrides to edit your page HTML.

    Update: You can also blocks scripts using the network tab of browser developer tools, but we prefer the HTML code as we can always save some version of it and not loose track of what’s blocked.

    Advantage is that it won’t disrupt your site and that you can do these changes on localhost most of the time, so the file editing is very quick.

    1. Disable any JS concatenation or minify.

      1. Perhaps that already fixes the issue? Let us know what you use and we will post some suggestions to you.

    2. Open the URL where you can see the issue.

    3. Open the page HTML source code (View Source), copy it and save it as a HTML file. Store it on your site like: http://mysite.com/test.html

      1. If the video is not using FV Player Pro Vimeo or CloudFront integration, just store it on your http://localhost (if you use Windows, get XAMPP, if you use Mac, get MAMP to have your http://localhost running), but using your site domain will provide a better testing environment.

    4. Now that you have the HTML version of your site ready we can check what script is causing the issues. But first open it and make sure you are able to reproduce the same issue with playback.

    5. Open the HTML in some editor which supports regex well, such as VS Codium

    6. Replace (<script[\s\S]*?</script>) with <!--DIS\1END--> this will disable any JavaScript by putting it into a <!--DIS .... END--> HTML comment.

    7. Open your HTML page again and double check on Developer Tools Network panel that no JavaScript is loading.

    8. Now remove the <!--DIS .... END--> HTML comment around jquery.js, jquery-migrate.min.js, fv-flowplayer.min.js, fv_player_pro.min.js.

    Does your video play now? If it does then there is indeed just some conflict in JavaScript which causes this. Now it’s time to find what JavaScript is causing that.

    1. Remove the <!--DIS .... END--> HTML comment around another commented out script.
    2. Does the video still play? Go back to step 1. in this section. If it doesn’t play, put the comment around that script back and proceed to next script using step 1. in this section.
    3. If you got to this step, then you have removed almost every HTML comment around almost every script tag and the ones which have to stay commented for our player to keep playing the video are the ones which cause the issue.

    Now is a time to look directly at the conflicting scripts.

    1. Open the URL of the first commented out script, copy the content and paste it to a new