iPhone上的视频标签顶部的菜单

我有一个简单的iPhone上的HTML5视频列表整个应用程序是在HTML除了一些原生的Objective-C建立一个UIWebView，有一个菜单，这是一个动画顶部使用jQuery手机。我遇到的问题是，如果我触摸一个菜单项目，视频将采取事件而不是菜单项目。iPhone上的视频标签顶部的菜单

如果我在普通浏览器中在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>

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

来源

2011-03-31 Neil

那很好。任何代码去与这个神秘的应用程序？ – Neal 2011-03-31 16:26:17

感谢您的回复，我添加了显示视频标记的html。我真的不确定我能展示足够的代码，因为我不得不在所有地方切碎点。任何想法，为什么我不能从视觉元素前视觉元素获得点击？视频始终将其作为点击下面的内容的点击。 – Neil 2011-04-01 08:32:55

好吧，这似乎是一个已知的问题，并有堆栈上的几个职位，表明人们已经出现在iPhone和iPad的视频标签上出现链接的问题。

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

接下来，我检测菜单何时关闭，并将海报放回到视频标签中，因此用户在菜单打开时看到播放按钮消失，使他们认为无法点击视频，为了我。

来源

2011-04-05 09:28:29 Neil

iPhone上的视频标签顶部的菜单

回答

相关问题