Question

我正在创建一个可以显示图片和视频的媒体库。这些显示在轮播中。

现在我遇到的问题是当我切换到包含视频的卡时我不能再切换卡了，因为切换事件可能应用于视频元素而不是旋转木马。

有人曾经设法解决这个问题吗？

[更新]

You can test it here

它在Safari / Mac上运行正常，但在Safari / iOS上却不行

我尝试将一个itemswipe事件添加到视频组件，但我遇到了同样的问题，它不会在iOS上触发......

这似乎与浏览视频组件时WebView垂直滚动的事实有关。

Answer 1

您必须通过向视频对象添加enableControls：false属性来禁用本机视频控件。但是你必须实现自己的自定义控件。

此处提到此问题：https://stackoverflow.com/a/3488052/458679“您的触摸事件被播放器的默认控件吸收。如果您将视频元素的控件设置为false，则可以完全控制视频元素上的事件。但这样做意味着你必须实现自己的自定义控件，这不是很难。“

我还尝试在视频上放置带有z-index的叠加div（我在下面粘贴代码）。但它并没有对IOS起作用。如果启用了原生视频控件，则播放器始终位于顶层。

将第82行更改为;

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

添加这些样式 .x-video {position：absolute;}

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