Foliovision › Forums › FV Player › Troubleshooting › WPLMS – Unable to play videos after update on ajax loaded pages
-
Hi there,
Since the last update of both main plugin and pro plugin, I can’t play any video on pages that are loaded via ajax. I am using WPLMS theme, and the course content is loaded in ajax. It was working fine until update so I went back to v6.0.4.18 and pro v0.7.4.
I have this code snippet that your and/or WPLMS requested to put in footer for compatibility (is there something to update here?):
<script>
jQuery(document).ready(function($){
$(‘.unit_content’).on(‘unit_traverse’,function(){
if($(‘.flowplayer’).length){
$(‘.flowplayer’).each(function(){
if( !$(this).data(‘flowplayer’) ) $(this).flowplayer();
});
}
});
});
</script>This snippet is added through the WPLMS>footer settings area.
WP, all plugins and theme are up to date.
I don’t use JS minifying. Plus my cache plugins are disabled on staging site.Can you have a look please? Here is my staging details:
https://dev.harp-school.com
user: *******
pass: *******Please go to this free course (https://dev.harp-school.com/course/un-elfe-dans-les-bois-evelina-simon) to test player. Player works on course intro page, but if you click on take this course, and go to any of the sub-units, player won’t play…
Thanks for your help!!
Evélina
-
-
Hello Evélina,
we asked you to let us know if there are some issues with the new version here, so thank you for your follow up! https://foliovision.com/support/fv-wordpress-flowplayer/troubleshooting/issue-with-ajax-safari-audio-overlapping
That code snippet in WPLMS Footer settings is no longer necessary. You can either get rid of it and it should all work for you, or you can upgrade to FV Player 6.1.3 which we released now.
I will ask WPLMS to update their instructions on site.
Thanks,
MartinHi,
Thanks for your super-fast reply ^^. Removing the snippet solved the non playable issue! But:
Yet and I can’t figure out why, many of my users are facing an issue that I never saw before and couldn’t find anywhere here in the support forum: “html5: unsupported audio format” (see screenshot). So far, only chrome 58-59 users (on both Win and Mac) are reporting this.
I have the same user agent as some of my users, yet it works fine on my end and not on their end. I have cleared all caches (wp-rocket, cloudflare) many times but issue persists.
Can it be an antivirus or proxy issue on my user end? (Since my aws videos can only be accessed in https though harp-schoo.com).
Or should I use another snippet to make the payer compatible with WPLMS? Note: WPLMS theme is not up to date (v2.4 installed, latest is 2.9) because I didn’t had time to test it properly (twin babies home lol :-)Thanks for your help!
Evélina
Sorry forgot to mention:
This happens for sure on my live site (since users do not use my staging site).
So you might want to check my live site:
https://www.harp-school.com/wp-admin
Credentials are the same I provided above for staging site.Thanks!!
Hello Evélina,
congratulations to the twin babies!
I tried to take the https://www.harp-school.com/course/pia-salvia-image-moi/ course, but our user doesn’t have permission for it and I wasn’t able to quickly figure out how to add the subscription to our user.
What Windows and OS X versions are you users who are having the difficulties using?
Thanks,
MartinHi Martin,
Yeah sorry I forgot to give you access to courses. It should work fine now.
The thing is that it happens also on the course description page (before entering the course). So it is not related to ajax or so.
So far the users who reported this issue are on Mac OS 10.12 + chrome 58, and the latest is on Win 10 + chrome 59 (see screenshot).
Even with antivirus disabled on windows the issue persits.For a no ajax page you can try here: https://www.harp-school.com/course/deborah-henson-conant-new-blues/
Otherwise you can now take any course to test in ajax environment.Like I said I can’t reproduce the issue on my computer (Mac Os 10.11, chrome 59). But I can see this issue when I use http://www.locabrowser.com/, and whatever country I use the issue shows up.
Thanks for your help!
Evélina
Hello Evélina,
perhaps these new users with laters OS versions don’t have Flash installed, in that case the message is actually correct. Please try to enable Settings -> FV Player Pro -> Integrations/Compatibility -> Enable HLS.js (beta).
However this will require use of the CORS headers, you can find the instructions here: https://foliovision.com/player/video-hosting/hls#hls-js
I see that your crossdomain.xml only permits some of the domains, so you will have to adjust your CORS accordingly to get that kind of a basic protection.
Thanks,
MartinHi Martin,
Thanks for quick support! My users tried to download/install the flash plugin, without success.
So I’ve enabled the HLS.js in the fv flowplayer options.
I went to my S3 bucket and saw that the CORS recommended on the guide you sent where already there.
But I had to add the whitelist headers in my cloudfront distribution (I remeber I had to remove them but why?). I followed your guide and add all of them (acces-control-request-headers, acces-control-request-method and origin).I remember that my crossdomain.xml file restricts to my domain only, btw do you think this is a good practice? If yes, then when you say “you will have to adjust your CORS accordingly”, what should I do?
// Your doc is fantastic! I can’t imagine the time you put writing your documentation! I’ve wrote some myself so I know the time (and passion) it takes to make it clear and complete! Now before I buy a key plugin, I always check the doc, and if the doc is of great quality, I know the plugin is too
I will ask my users to try again with these settings. I’m wondering what is different in the new player version that could cause that?
Thanks for your help, this is tough one :-p
Evélina
Hi Evélina,
The crossdomain.xml should be open to all domains to make the Flash fallback work. You can see an example XML policy in the same guide Martin sent you, under the part Using in Browsers with Flash.
Thanks,
EduardOk,
I will open my crossdomain to all domains. Nevertheless, why was my setup working perfectly for over a year, and after last update it is all messed up? I want to be sure we don’t miss the real cause of my issue..
Plus, with my current setup now (with HLS.js checked), chrome should play the video without flash right?
If modern browsers can now do without flash, I don’t want it to fallback on flash because of a wrong setup, then have to set everything up again when the main browsers will decide to forget flash or so.Any ideas of what could be in the last version of fv player and fv pro and that could explain this new behavior and errors?
Thanks for your help!
Evélina
Hello Evélina,
HLS.js is the technology used by Dailymotion. It uses Media Source Extensions which is a web technology for video playback which is used by YouTube and now also Vimeo.
So while Flash is getting deprecated (it might be the reason why some of your users suddenly had issues playing the videos) your new setup with CORS headers will work.
Restricting the CORS headers or crossdomain.xml to a set policy would make your videos a bit harder to hotlink to another websites, but only for devices which don’t support it natively – so iPhone, iPad, Safari browser or OS X or Android phones could play it without restrictions.
Thanks,
MartinHi Martin!
Thanks for detailed answer about HLS.js
So I have now set my CORS in S3 and cloudfront, plus modified my crossdomain.xml to allow all domains. I can now watch my videos in locabrowser, which makes sense.
Yet I have emptied all caches and some of my users are still experiencing that issue.
Should I empty cloudfront cache too by invalidating objects so the new CORS is applied to my videos?I was wondering that since in locabrowser, I use to have the “unsupported audio” issue while the problem was a crossdomain related issue, the “unsupported audio” error message is not accurate and can mean there is an issue that has nothing to do with audio, right?
Any other ideas that could explain this issue for my users, that clearly started happening when I updated from fv player v6.0.5 to 6.1.2+. I’ve also updated WP 4.7 to WP 4.8 at the same time.
It happens to users on chrome 58+ (so far win 10 and mac os 10.12), could it be the way chrome handles things? But many other users with exact same user agent, like me are not seing that issue.. That’s a tough one.. and it use to work fine with my limited crossdomain and no CORS setup..Thanks for your great help!
Cheers,
Evélina
Hello Evélina,
please follow the steps here to make sure the CloudFront cache is cleared: https://foliovision.com/player/video-hosting/hls#clearing-cloudfront-cache It must be the last thing that is missing here and after that there should no longer be any issues.
I think the issue has something to do with the Flash being deprecated slowly.
Thanks,
MartinHi Martin,
Thanks for the link. Do you think cloudfront cache can be the issue? Cause only 2 people are reporting the issue out of hundreds. And now the issue is not saying audio error but video error.
I am asking this because clearing the cache will cost me money since amazon will then copy all requested videos again to their edge servers.. and these videos are the same as before. We frequently add more videos but old ones remain the same. So if I can bypass this.. Thanks
Hi Evélina,
You can clear individual videos from the CloudFront cache, or just certain folders. It depends on what command you use in the Invalidation box.
Our guide says how to clear the whole cache by using the “/*” wildcard, but you can clear an exact folder of a specific HLS stream, for instance “/HLS/stream1” or whatever the path is in your S3. You can read more about it in this AWS guide – Invalidating Objects (Web Distributions Only).
Thanks,
EduardHi there,
Sorry to bother you again, but I keep having users reporting videos not playing. Always on chrome so far (latest version 59.x, on Mac OS 12.x, Win 7 and Win 10). Like I said earlier it was working fine for 1 year before WP 4.8 and latest fv player versions.
I tried removing hls.js (since it was working fine without that setting before) but it doesn’t solve it. About that setting, what is your recommandation, should I enable it or not?
The only fix I found for my users is to have them force enable flash , from the secure area on the left of the address bar. Is this a hint?
Any new insights would be welcome, thank you so much!
Cheers,
Evélina