Jquery iPhone上的视频标签，顶部带有菜单

我在iPhone上有一个简单的html5视频列表，整个应用程序都是html的，除了一些本地Objective-C设置UIWebView外，还有一个菜单，使用jQuery mobile在顶部设置动画。我遇到的问题是，如果我触摸菜单项，视频会记录事件而不是菜单项

如果我在pc或mac上的普通浏览器中查看它，没有问题

<div data-role="page" id="videosMenu"> 


    <div data-role="content" id="mainContent" style="text-align: center"> 

        <div id="opaqueOverlay"></div>


        <h1>VIDEOS</h1>


        <table id="videosMenuTable">
            <tr>
                <td valign="top" align="left" id="video 1"><video src="images/gallery/videos/grey_exterior_night_640_480/grey_exterior_night_640_480-iphone.m4v" poster="images/gallery/videos/grey_exterior_night_640_480/grey_exterior_night_640_480-th.jpg"/><br/>
                </td>
                <td valign="top" align="left" id="video 2"><video src="images/gallery/videos/interior_640_480/interior_640_480-iphone.m4v" poster="images/gallery/videos/interior_640_480/interior_640_480-th.jpg"/></br>
                </td>
                <td valign="top" align="left" id="video 3"><video src="images/gallery/videos/white_exterior_day_640_480/white_exterior_day_640_480-iphone.m4v" poster="images/gallery/videos/white_exterior_day_640_480/white_exterior_day_640_480-th.jpg"/><br/>
                </td>
            </tr>
            <tr>
                <td>VIDEO ONE</td>
                <td>VIDEO TWO</td>
                <td>VIDEO THREE</td>
            </tr>
            <tr>
                <td valign="top" align="left" id="video 4"><video src="images/gallery/videos/white_exterior_studio_640_480/white_exterior_studio_640_480-iphone.m4v" poster="images/gallery/videos/white_exterior_studio_640_480/white_exterior_studio_640_480-th.jpg"/><br/>
                </td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>VIDEO FOUR</td>
            </tr>
        </table>

        <div class="menu" id="menu_gen">
            <p>MENU</p>
            <ul>
                <li class="explore" rel="explore">EXPLORE</li>
                <li class="galleryMenu" rel="galleryMenu">GALLERY</li>
                <li class="videosMenu" rel="videosMenu">VIDEOS</li>
                <li class="featuresMenu" rel="featuresMenu">FEATURES</li>

            </ul>                                           
        </div>

        <div class="menu" id="menu_next">
            <p>NEXT STEPS</p>
            <ul>
                <li rel="shareMenu">SHARE</li>                  
            </ul>                                           
        </div>          

    </div>

</div>

录像带






视频一
录像二
视频三


视频四
菜单


探索
画廊
视频
功能

下一步


共享

---

以上是视频的标记，我知道不是很优雅。任何我希望有人能给我一些想法，看看在哪里看，什么样的事情会导致出现在另一个项目下面的项目进行交互，而不是位于视频项目顶部的菜单项。

好的，这似乎是一个已知的问题，堆栈上有几个帖子可以演示人们对iphone和ipad上视频标签上出现的链接有意见

我通过使用jQuery检测菜单何时打开来解决这个问题。然后我从每个视频中找到海报属性，并将其存储，然后在每个视频上进行替换，将海报显示为img标签

---

接下来，我检测菜单何时关闭，并将海报放回视频标签中，这样用户就可以在菜单打开时看到播放按钮消失，让他们认为他们无法点击视频，这对我很有用。

。这个神秘的应用有什么代码吗？谢谢你的回复，我已经添加了显示视频标记的html。我真的不确定我是否能显示足够的代码，因为我必须把所有的代码都切掉。你知道为什么我不能从视频元素前面的元素上点击吗？视频总是把它看作是点击下面的东西。