Impossible to switch card with a video in Carousel

Question

I'm creating a media gallery which can displays pictures and videos for the moment. These are displayed in a Carousel.

Now the problem I have is when I switch to a card that contains a video I can't switch card anymore because the switch event is probably applied to the video element and not to the carousel.

Did somebody ever had this problem a managed to solve it ?

[UPDATE]

You can test it here

It works fine on Safari/Mac but doesn't on Safari/iOS

I have try to add an itemswipe event to the Video Component but I get the same problem, it doesn't fire on iOS...

It seems to be related to the fact that the WebView is scrolling vertically when you swipe the video component..

Answer 1

You have to disable native video controls by adding enableControls:false property to the video object. But you'll have to implement your own custom controls.

This issue mentioned here: https://stackoverflow.com/a/3488052/458679 "Your touch events are being absorbed by the default controls of the player. If you set the video element's controls to false you can have full control of the events on the video element. But doing this means you'll have to implement your own custom controls, which isn't very hard."

I also tried putting an overlay div with z-index on the video(i pasted codes below). But it didn't worked on IOS. The player always on top layer if native video controls are enabled.

Change line 82 to;

var panel2 = new Ext.Panel({items:[video],html: '<div class="overlay">first panel</div>'});

Add these Styles .x-video {position:absolute;}

.overlay {width: 100%;
height: 100%;
background-color: gray;
z-index: 111;
position: absolute;
opacity: 1;margin-top: -25px;}