8 Replies Latest reply: Sep 24, 2014 4:43 PM by rossfranks

Button on video doesn't work on iPad

rossfranks Sep 17, 2014 4:36 PM

Hey there I have a button on top of a video but it doesn't work on an iPad which has the video controls enabled on it.

It works on desktops though.

Is there something I'm missing?

Thanks in advance.

1. Re: Button on video doesn't work on iPad

Devendar_kumar Sep 17, 2014 4:52 PM (in response to rossfranks)

Hi,

There is no known issue with iOS devices. Can you please provide us any link for testing?

Regards,

Devendra
Like Show 0 Likes (0)

Actions
2. Re: Button on video doesn't work on iPad

rossfranks Sep 17, 2014 10:12 PM (in response to Devendar_kumar)

Hey there Devendar_kumar,

here's my stripped down version of the site...

http://twistedpancreas.com/edge/misc/site.zip

When viewed on a iPad the blue buttons over the video don't work, yet it all works on a desktop machine.

Any help would be appreciated.
Like Show 0 Likes (0)

Actions
3. Re: Button on video doesn't work on iPad

lester_de_meyer Sep 18, 2014 12:34 AM (in response to rossfranks)

Hi,

I also experienced the same problem. It's a typical IOS behaviour.

I quote:
"The problem is that the HTML5 video element on iOS seems to hijack the click events in the areas (of the elements layered on top) that are contained in the bounding box of the video element. If the bounding box is made smaller with scale(0.01) or the bounding box is pushed off the screen with translateX(-2560px), no element areas are directly above the video element and the click events will get fired."

See here: http://stackoverflow.com/questions/8325311/controls-overlay-for-video-on-iphone-ipad
Or here http://www.frontendfan.com/overlay-on-top-of-html5-video-tag/

Good luck!
Kind regards,
Lester.
Like Show 0 Likes (0)

Actions
4. Re: Button on video doesn't work on iPad

rossfranks Sep 18, 2014 5:00 PM (in response to lester_de_meyer)

Thanks Lester,

I gave that a go and it didn't seem to make a difference unfortunately.

So by bounding box do you mean setting the movie's symbol stage width and height to 0?

Like so...

Or by referencing them from the code, ie...

sym.getComposition().getStage().getSymbol("gen").$("medicationAlliance").css("-webkit-tran sform:scale(0.01)");
sym.getComposition().getStage().getSymbol("gen").css("-webkit-transform:scale(0.01)");

Cause that's what I gave a go.
Like Show 0 Likes (0)

Actions
5. Re: Button on video doesn't work on iPad

lester_de_meyer Sep 19, 2014 4:22 AM (in response to rossfranks)

It's just better to not have buttons on top of the video. iOS7 just doesn't allow you to do that.
Scale, translate the video or temporary hide the original video controls are just tricks to get your own (overlayed) buttons working.
Not an ideal solution in the first place.

BUT! It seems to be solved in iOS8.
I can click the arrowbuttons on top of your video now.

Kind regards,
Lester.
Like Show 0 Likes (0)

Actions
6. Re: Button on video doesn't work on iPad

rossfranks Sep 21, 2014 4:23 PM (in response to lester_de_meyer)

Ah sweet, ill have to update my IOS then

Thanks for that.
Like Show 0 Likes (0)

Actions
7. Re: Button on video doesn't work on iPad

lester_de_meyer Sep 22, 2014 12:45 AM (in response to rossfranks)

Hi ,

Did the update to iOS8 solve your problem too?

Kind regards,
Lester
Like Show 0 Likes (0)

Actions
8. Re: Button on video doesn't work on iPad

rossfranks Sep 24, 2014 4:43 PM (in response to lester_de_meyer)

Yeah that seemed to fix it, thanks for your help lester_itiz
Like Show 0 Likes (0)

Actions