상단에 메뉴가있는 iPhone의 비디오 태그

iPhone의 html5에 간단한 동영상 목록이 있습니다. 전체 앱은 UIWebView를 설정하는 기본 네이티브 Object-C와 별도로 HTML로되어 있으며, 애니메이션이 적용된 메뉴가 있습니다. jQuery 모바일을 사용하는 top. 내가 가진 문제는 메뉴 항목을 터치하면 비디오가 메뉴 항목 대신 이벤트를 사용한다는 것입니다.상단에 메뉴가있는 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

답장을 보내 주셔서 감사합니다. 동영상의 마크 업을 보여주는 html을 추가했습니다. Im는 충분한 코드를 보여줄 수 있다고 확신하지 못한다. 동영상 요소 앞에 시각적 요소 인 클릭이 발생하지 않는 이유는 무엇입니까? 비디오는 항상 밑에있는 것을 클릭하는 것으로 간주합니다. – Neil

좋아, 이것은 알려진 문제인 것처럼 보이며 사람들이 아이폰과 ipad에서 비디오 태그를 통해 나타나는 링크에 문제가 있음을 입증하는 Stack에 대한 여러 게시물이 있습니다.

jQuery를 사용하여 메뉴가 열렸을 때이를 감지하여이 문제를 해결했습니다. 그런 다음 각 비디오에서 포스터 attr을 찾아 저장하고 각 비디오에 대체하여 포스터를 img 태그로 표시합니다.

다음으로 메뉴가 닫히고 비디오 태그에 포스터를 되돌려 놓으면 메뉴가 열려있을 때 재생 버튼이 사라져서 비디오를 클릭 할 수 없다고 생각하게됩니다. 나를 위해.

출처

2011-04-05 09:28:29 Neil

상단에 메뉴가있는 iPhone의 비디오 태그

답변

관련 문제