Play button not shown for html5 video on iPad

[larsschwarz]

Hi there,

we noticed that on iPad/iPhone AnythingSlider does not show the regular iOS playbutton on top of the video poster. We are using HTML5 video (no Vimeo, YouTube) which works fine on all desktop browsers. On the iPad the video is there and would work but since the user does not see a play button (just the video poster) he can't play it. When scrolling between the slides you can see that the play icon is there, but it somehow gets hidden by AnythingSlider.

Since debugging it a pain in the arse on iPad/iPhone i can't really tell what's the issue, but when saving a static version of the html source (incl. the DOM elements AnythingSlider created) and disabling the initial AnythingSlider call the video works, so it seems it might be an issue with the dynamic width that is set on the container when scrolling the slides?

Thanks: Lars

[Mottie]

Hi Lars!

Well, I don't own an iOS device so I have no way to troubleshoot this problem...

• Does it work if you switch the slider to "fade" mode?
• Does this issue occur when you float the video? or absolutely position it?

I would appreciate any help you can provide.

[larsschwarz]

Hey Mottie,

setting mode to "fade" results in a black "overlay" (no video poster shown at all). Setting the position to "relative" has the same effect as fade. Setting it to "absolute" shows the video poster, but no play icon. Setting float to "left" or "none" has no effect at all ...

I have a strange fealing that setting the width and dynamic left pos on the AnythingBase kills the play button, like iOS picks up the upper/outer node (UL element), checks the width and/or position and centers the play icon. Since the width is like 7000px in my example and the left position changes dynamically to negative values, does this might break the iOS positioning of the icon?

Thanks: Lars

[Mottie]

In the latest version, I modified the fade mode a bit.

It now uses the resumeOnVisible option (it made sense to me somehow) that when set to true (default) the non-current panels would only fade the opacity to zero and not hide the panel using display: none. If false the panels would fade and hide, so this should completely hide any videos behind the current panel.

I've also made the current panel use a z-index of zero. Non-current panels have a z-index of -1. Hopefully this fix the play button issue? * crosses fingers *

[larsschwarz]

Hey Mottie,

many thanks for the update, but unfortunately it brings no change to the iOS issue ... still no play icon. Tried both modes ('f' and default). I already added loading the videos inside an iFrame, but that causes trouble with the video.js, since there's no service for HTML5 video inside an iFrame there (currently to lazy to add one by myself, especially when using more than one video inside the slider).

My best guess is that iOS does not like adding anything around the video element once the DOM is loaded or changing values like width/height by a script, but i also tried removing all width and height settings within the script and also removed to appendto stuff that adds custom elements around the wrapper div - no change. It seems like the updateSlider in the init function kills the play button, but i'm not sure why, how and when exactly.

Thanks again

[Mottie]

=(... hmmm, have you tried mediaelement.js?

[larsschwarz]

Done that ... using it with iPadUseNativeControls = true shows no play icon at all, setting it to false shows mediaelement play icon, but never loads the video (preloads for ever after hitting play). I think the video is somewhere misplaced or "disabled" by iOS. Best thing: it behaves differently on iPad/iPhone, on iPhone there's the mediaelement play button, but clicking it does nothing. Just to make sure it's no CSS styling error on my side: your video demo at github also does not show a play icon on the HTML5 video tab.

[scuben]

Hi there,

I have the exact same issue as Lars. Showing the Videos without the slider it will work as expected (showing every video with play icon and poster. but as soon as i activate the slider it shows me only a black overlay and the controls are not working.

desktop browsers btw work without any problem.

is there a fix around? or will there be a fix in the future?

[Mottie]

@scuben I'm not sure what lars did to show the video but I still haven't had the time nor an iPad to work out this problem.

[justinputney]

BTW, this is replicable on the iOS Simulator (no device required for testing).

[priisc]

Same problem here :( I was trying to fixe the issue for a while now ... Is anyone has found out a way to do it ? or I was wondering if there were any way to add a rule that force the anythingslider to call Youtube video when we are on IOS instead of the HTML 5 videos.

any help? I'm desperate ! Thanksa lot by advance !

Prisc-

[h45mati]

Is there any solution to this? Thanks

[Mottie]

Not that I know of, sorry =(

[h45mati]

I found that when i try to see this link http://css-tricks.com/examples/AnythingSlider/video.html#&panel1-4 on ipad youtube embed works and html5 dont, the thing that i think can help us is that the youtube embed shows with the standar html5 video controls, so maybe anything slider is working with the youtube html5? maybe the problem can be with the way that we use the video tag? Thanks

[h45mati]

I found a workaround!!!! if you put the video inside an iframe it works!

[Mottie]

Cool! Actually, from my testing a while ago, YouTube iframes were actually defaulting to HTML5 video, if the browser supports it.

Umm, when you put the video inside an iframe, does it still pause and resume as expected?

[h45mati]

Mm, not really but it shouldn't be hard to make a function in jquery to do that(i think), the friday i will try that and if you want i can post it(probably wouldnt be perfect, i`m very newbie with this)

[h45mati]

Sorry, but i couldnt do this, there is any new information about this problem? Thanks

[h45mati]

I tried with the newest ios on ipad and this seems to be solved