Question

我在iPhone上的html5中有一个简单的视频列表整个应用程序是html，除了一些设置UIWebView的原生Objective-C，还有一个菜单，使用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>

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

Answer 1

好吧这似乎是一个众所周知的问题，Stack上有几篇文章证明人们在iphone和ipad上的视频标签上出现了链接问题。

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

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

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

1 个答案: