-
Hi, am running into jlsjs-lite: Network error when trying to play a video. I have posted it on the page below:
https://ballstrikingblueprint.com/members/fv-player-test/
Seems to be happening in all browsers.
-
-
The chrome browser console is showing the error “Access to XMLHttpRequest at ‘…..’ from origin ‘…’ has been blocked by CORS policy: No fv-player-test/:1 ‘Access-Control-Allow-Origin’ header is present on the requested resource.
I did follow the instructions here: https://foliovision.com/player/video-hosting/how-to-enable-cors-headers for both the S3 bucket and the Cloudfront distribution. I am seeing now the note that this can take some time to update… I will check back later.
UPDATE: I tried the AWS settings recommended here to enable CORS headers: https://foliovision.com/player/video-hosting/how-to-enable-cors-headers
As it still did not work I continued to research online and found this, which looked promising.
NOTE: the top answer on that page looks like it could answer why the CORS header wasn’t working, but the solution presented also appears to be no longer needed due to updates at AWS described in the next 2 answers (see attached).
I did however try the solution from the attached and it is not working either (it is what is currently deployed on my test page): https://ballstrikingblueprint.com/members/fv-player-test/
With this latest test, the error being thrown in the chrome browser console no longer mentions a CORS policy… it now just says “Get …..cloudfrontURL….. 403 forbidden”
Hello Aaron,
Are you using “Restrict viewer access” for your Cloudfront?
If yes, then you need to use the Stream Loader feature to make sure the HLS streams play: https://foliovision.com/player/video-security/video-protection-methods/signed-urls-hls-protection
I added a mention of that in our Cloudflare guide now.
Thanks,
Martin
Thanks Martin. Enabling the Stream Loader feature does allow it to play, although it still won’t play for me in Safari for some reason.
Also, the load time is quite slow (maybe 5 seconds from clicking play until anything starts). Doesn’t sound like a ton, but here is a page for comparison sake where I have the FV Player version and the same video hosted through Vimeo right below it:
https://ballstrikingblueprint.com/members/fvplayer-bunker-test/
Could that extra time be because of the “restrict viewer access” setup on Cloudfront… or something I can adjust?
Hello Aaron,
Please use the Speed-up option in Settings -> FV Player Pro -> Setup tab -> Stream Loader as the FV Player Pro Stream Loader speed might be slower if your WordPress is slowed down by running too many plugins, or if there’s some plugin which slows down any general WordPress response.
That might save even 2-3 seconds in your video load times.
Thanks,
Martin
Thanks Martin, that setting is actually already turned on and it’s still taking the 5 seconds or so. Any other reason it might be slow?
On the Safari issue, I have noticed now that if you click the video just once to play it will sit there forever on a black screen… if you click the black screen a second time it does start to play. Any idea why it would require a second click?
Finally, is having just the HLS version of the video generally sufficient to play on all devices or is it best practice to have some other fallback format?
Hi Martin, still haven’t been able to get the above resolved, but figured I’d try setting it up with Coconut/DigitalOcean as that looked like it might be easier.
Went through the Wizard and followed the instructions on these pages:
https://foliovision.com/player/video-security/encoding/encrypted-hls-coconut
https://foliovision.com/player/video-security/encoding/encrypt-encode-videos-wordpressBut I can’t get it to play anywhere, here is the test page I set up:
https://ballstrikingblueprint.com/members/fvplayer-coconutdigitalocean-test/The instructions seemed very simple, I’m not sure where I could have gone wrong. It looks like the CORS settings were set up automatically.
One thing that was kinda strange… every time I uploaded a file, instead of showing just the one file processing it showed (and created) 3 files with the same file name. I did try creating separate shortcodes for each one and tested them all but got the same error message each time.
Hello Aaron,
I see that with the Speed-up setting each Stream Loader response takes 1 seconds or 0.7 seconds when it’s cached. On foliovision.com and our other websites it’s just 0.4 seconds or 0.24 when cached.
I’m not sure why it’s slower on your website as your test page HTML code loads within 0.5 to 1 second which is not bad when you consider that there is no WordPress cache plugin. So it does not seems that you use too many plugins.
I see that the video encoded with FV Player Coconut does not play. The Stream Loader shows an error that the access to your DigitalOcean Space
the-ballstriking-blueprint-encoded-videosis denied.Could you please double check the Access Key and Secret Key in wp-admin -> FV Player -> Settings -> Hosting -> DigitalOcean Spaces?
Please also open wp-admin -> FV Player -> Coconut Jobs -> Add New. It should bring up a modal window with the content of your DigitalOcean Space for your source videos – the videos which you uploaded. Will that work? It depends on these Keys I mentioned in the previous paragraph.
We have a bug report of the duplicate FV Player Coconut jobs. It seems to only occur randomly, so it’s taking us more time than expected to fix it.
Thanks,
Martin
Hello Aaron,
Also – regarding Cloudfront video serving speed:
I tried to play your video at 360p quality. Individual video segments which are about 500 kB each load in 1.4 seconds. So the download speed is just 356 kB/s or so. If I switch to 1080p, it’s about 1.5 MB/s. If I seek into an un-buffered part of video I wait for 2-3 seconds for it to continue playing.
For Vimeo the 1.4 MB video segments load in 0.08 to 0.5 seconds. Which is of course much faster – about 3 to 17 MB/s. The seeking takes 1-2 seconds.
I wonder what speeds we will get with DigitalOcean Spaces CDN – used by FV Player Coconut. For our videos it runs at 6 to 12 MB/s.
Thanks,
Martin
Hello Aaron,
Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-wordpress-flowplayer.zip
Then the issue with duplicate issues will be fixed.
Thanks,
Martin
Hi Martin,
-
double-checked that the Access Key and Secret Key are correct for DigitalOcean Spaces
-
the videos I have uploaded do indeed show in the modal window when I go to wp-admin -> Coconut Jobs -> Add New
-
uninstalled and reinstalled FV Player from the link provided
Coconut/Digital ocean Spaces video still not playing: https://ballstrikingblueprint.com/members/fvplayer-coconutdigitalocean-test/
What can I try next?
Hello Aaron,
It’s a strange issue. I see that your Access Key and Secret Key really has to work as even the video splash image shows on your test page – it’s loaded from DigitalOcean Spaces as well.
It seems that something prevents your server from loading the m3u8 files from DigitalOcean Spaces. We do that to be able to increase the video download protection by adding the URL signatures – each link to any video (or its segment) times out, making it harder to re-distribute.
The URL which it’s trying to load is:
https://nyc3.digitaloceanspaces.com/the-ballstriking-blueprint-encoded-videos/Bunker-Blueprint-2-27/index.m3u8The response which it gets back is:
<?xml version="1.0" encoding="UTF-8"?><Error><Code>AccessDenied</Code><Message></Message><BucketName>the-ballstriking-blueprint-encoded-videos</BucketName><RequestId>tx00000fc7b1bec7ae3ecfa-0065defb2d-717cbb9-nyc3d</RequestId><HostId>717cbb9-nyc3d-nyc3-zg04</HostId></Error>Please try to disable the Speed-up setting to see if that help. If it won’t we can tweak the way our FV Player Pro Stream Loader technology loads these m3u8 files.
However there is also a slight chance that your server is just blocked by DigitalOcean. So please submit the above details to DigitalOcean support if it still won’t work.
You can also try to insert this URL as a new video in wp-admin -> FV Player: https://nyc3.digitaloceanspaces.com/the-ballstriking-blueprint-encoded-videos/Bunker-Blueprint-2-27/media-1/stream.m3u8
It will not play as the URL signatures on the individual video segments will be missing, but I wonder if it will analyze the file properly and show its duration.
Thanks,
Martin
Hi Martin, disabled the speed-up setting and it appears to be working, and still faster than the amazon load time (and also isn’t having the double-click issue in safari)… so that’s all good. I’ll keep testing and let you know if we have any more issues.
One last question – is having just the HLS/m3u8 version considered sufficient to serve across all devices? Or should I also have a webm or other version as well for maximum coverage?
Thanks,
Hello Aaron,
It’s strange that it won’t work with Speed-up.
But it’s good it’s much faster than before than with AWS, even if the stream is encrypted. The encryption adds about half second delay.
HLS plays in Safari – both desktop (macOS) and mobile (iOS).
FV Player includes the HLS.js library which allows the other browsers to play it as well. It’s any Chrome version in last 10 years, any Firefox in last 9 years. That includes all the Chromium (open-source core of Chrome) browsers like Opera or Brave. We also use it for Microsoft Edge and all the Android browsers, even though these do support HLS streams, but the support is not great in the older versiosn.
Thanks,
Martin -
