CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

mode: fade and video slide prematurely continuing #611

Closed lorig closed 9 years ago

lorig commented 10 years ago

I have been trying to figure out what was causing the slider to move on before the video completes on Mac's Firefox. At first I thought it was the autoPlay set to "true", but it seems to be when the mode is set to "fade". I am using the 1.9.3 version of the slider and version 1.5.1 of the video script. If I missed a solution here, I apologize, but maybe this will help troubleshoot, if it has not yet been solved. For the record, the Firefox on my PC is doing the same thing, while all other browsers I have access to seem to handle it fine. I have three slides, the first two are images and the last one a video. It seems the most reliable way I have replicated the issue is to let it go through all three slides and on the second round, I hit the video play button (iframe YouTube).

Mottie commented 10 years ago

Hi @lorig!

This is interesting that the problem only seems to occur in Firefox. You wouldn't happen to be testing this in a local environment? Communication between a document and iframe is restricted in such a case and none of videos will pause properly.

If that is not the case, can you share a bit more information & code. A demo of this issue would be the best. Would you happen to be using backbone (see this Stackoverflow question/answer)? Is there anything else that might be pertinent?

lorig commented 10 years ago

Hi Mottie!

Thank you for your response.

I was using our test server, but I just posted it to our live server so I can share it with you: http://warrington.ufl.edu/x_Lori/slider/mse.asp

It is quite possible that I have not implemented something right as javascript is not my strong point. I was using Firefox 27.0.1, which updated to 28.0 today, but has the same result. The PC I'm testing with is on a VM, but it was the same version of Firefox which also updated to 28 today. I currently have the mode set to "fade". I sought out another PC to try this on and found one with version 18.0 and it did not have the issue, until it updated. I have not had trouble with Safari, though it may have been acting up before in previous versions.

Let me know if there's anything more I can provide to help. Each time I have been letting the slider play through all three slides and when it goes to the video slide the second time, I hit play and move my mouse out of the slider area. The issue replicates every time in Firefox.

Thanks again for any help.

Mottie commented 10 years ago

Hmm, ok... when I open up the console (press F12). I see this error:

SyntaxError: JSON.parse: unexpected character jquery.min.js:2

When I looked at the jQuery version, it is 1.8.3. I have no idea why that version is having trouble, but communication between the iframe and parent window is done using JSON.

Try updating your version of jQuery and see if that fixes this problem. I'll dig more into this issue if this doesn't resolve the issue.

lorig commented 10 years ago

I had noticed console errors in Firefox too, but didn't know what to make of them. If you look now, you'll see I stripped out just about all script from the page, and I updated the jQuery to the latest version, but I still get one error when the slider gets to the video, if not the first time, the second time it gets to it (Error: Permission denied to access property 'toString').

Even though Safari behaves nicely, it too throws a console error: Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://warrington.ufl.edu". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

Hope this will provide some more clues. Let me know if you want me to try anything else.

Mottie commented 10 years ago

I'm not sure what to tell you... no where in the AnythingSlider code is there a toString.

I do see a toString in a script loaded from s.ytimg.com (You Tube images & scripts) which I'm not sure why it is only showing up in Firefox and not Chrome...

I'll try to investigate more when I have time.

lorig commented 10 years ago

I commented out mode: 'fade' and the error went away on Firefox, but Safari's error is still there.