-
I have placed an mp4 video at the following URL
http://www.codesignkit.org.au – towards the bottom of the page.
Currently viewing this page requires first entering the password ‘codesignkit1’.
All seemed to be fine to me but then the client has called saying:
1. the player including the Splash does not appear at all when viewed in the Safari browser
2. Client also uses IE 10 and in that browser video literally bounces up and down on the page. A very strange behaviour which can be viewed on this short video http://inkypress.server.net.au/wp-content/mrid/codesign/video/IE 10 bouncing FV player.MOV.
Any advice about how to solve these two issues would be appreciated. I will provide more details if requested.
-
-
Better URL for viewed bouncing video in IE 10:
http://inkypress.server.net.au/wp-content/mrid/codesign/video/IE-10-bouncing-FV-player.mov
Hello drfingerless,
1) Safari issues – I wasn’t able to replicate this issue in Safari 7.1 on OS X 10.9.5 or Safari 6.1.4 on OS X 10.8.5. Could you please check what browser version is your client using? I’ll ask my colleges to test some other versions in the meantime.
2) IE 10 issues – I was not able to reproduce the issue in IE 11 nor IE 9. Does it happen even if you use the default WordPress theme? You can use the theme preview and navigate to your page there.
Thanks,
Martin
Hello drfingerless,
2) IE 10 issues – I tested IE 10 now and I can reproduce this issue. There must be some CSS conflicts with the animations. I tried to removed the .fp-timeline using console and then the issue was occurring only when I hovered the mouse in and out.
I will forward this issue to our CSS designer, perhaps we should create a special styling option for your player with animations disabled to solve conflicts like this.
Thanks,
Martin
Hi Martin, thanks for looking in to this for me. You seem to be in a better position to test this issue as I do not have access myself to IE 10. My client does of course but it’s difficult to keep asking them to check to see if the problem is still there while I troubleshoot. They just want me to sort it out.
When you say ‘conflict with the animations’, what animations are you referring to? Do you mean the way that the controls appear and disappear?
I would appreciate any assistance with CSS that solves this issue, particularly as you are in a good position to test the result as you have access to IE 10.
Regarding the Safari issue I have asked the client to provide browser version and OS number so you can see if you can replicate the problem. Thanks again for helping out here. Your player looks good in every other respect but obviously if I can’t get it to behave in the browser that the client uses then I am in a spot of trouble.
Client reports Safari and OS X versions as follows:
Safari – Version 9.0.3 (11601.4.4)
OS – OS X El Capitan Version 10.11.3 (15D21)
Hello drfingerless,
IE 10 issues – could you please try to add the following CSS code to your theme?
#main .flowplayer .fp-timeline .fp-buffer{-webkit-transition:none;-moz-transition:none;transition:none}
That should help with the issue, let me know and I can check the IE 10 again.
Thanks,
Martin
Hello drfingerless,
I asked our team about the Safari issues.
Both issues appear to be some unfortunate CSS conflict.
Thanks,
Martin
I have added the transition css to the stylesheet. How does it look now at your end? I can always ask the client to check as long as I don’t do it too often.
Regarding Safari, are you hoping to provide a fix for this CSS conflict as well?
Hello drfingerless,
the CSS rule was too weak, we will check for something that would stop the CSS animations altogether. It could be good for compatibility, as clearly the CSS has some issue with your theme CSS.
We hope to resolve the Safari issue as well,
Thanks,
Martin
Just wondering how your CSS investigations are coming along? My client would like their website to go live but I can’t while the video has this problem.
Hello drfingerless,
it seems like CSS like this should help:
.no-animation.flowplayer * { -webkit-transition:none !important;-moz-transition:none !important;transition:none !important; }
However we are still investigating.
Thanks,
Martin
Ok, thanks Martin. I will ask the client to give it a try.
Hello drfingerless,
actually I made a mistake, the CSS rule should look like this:
.flowplayer * { -webkit-transition:none !important;-moz-transition:none !important;transition:none !important; }
I’m waiting for our CSS designer to have a look at this as well.
Thanks,
Martin
Hi drfingerless!
We have tested with Safari as well but found no issue. Please let us know if the issue still appears. Thank you!
Lucia
Lucia, the client using IE 10 says that nothing has changed. He has cleared his cache and the video is still jumping around. Also the Safari user (version indicated above) says that the problem now is that the poster image is not displaying. The video will play if he clicks on the large white blank space where the video should be but without the poster there is no indication that the video is there (even though it is).
Hello drfingerless,
IE 10 – I can see that the animations are not there anymore, but the video still jumps up and down. Unfortunately our CSS designer is sick today, so he couldn’t look deeper into it.
Lucia, please let drfingerless know what Safari on what OS X you used.
Thanks,
Martin
Any luck yet, Martin, Lucia?
Sorry guys, I can’t wait any longer. Jumping ship and looking for another player.
Hello drfingerless,
sorry for the longer wait, I was looking at it just today, but so far haven’t been able to find any CSS related issue. I’d look further in conflicts between JS.thanks
vk
Hello drfingerless,
we disabled all the JavaScript except for jQuery and FV Player on a copy of your site HTML and now our player is not jumping anymore in IE 10. So I guess one of the JavaScripts must be doing something wrong with it.
Thanks,
Martin
