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上的視頻標籤頂部的菜單

回答

相關問題