2

这在任何浏览器中都可以正常工作，但在 iOS6 上不行（没有在 iOS5 上尝试过）

我有一个带有 YouTube 视频的 iFrame，位于叠加层中。播放视频并切换叠加层后，视频再次中断。视频将在后台播放（您会听到声音），但不再可见。

这是一个最小的例子：http:
//jsfiddle.net/s9M6J/2/

<script>
/* jQuery */
$(document).ready(function() {
    $('a').click(function() {
        $('.videowrapper').toggleClass('hidden');
    });
});​
</script>

<style>
.hidden{
    display: none;
}​
</style>

<body>
    <a href="#" style="display: block;">toggleVideo</a>
    <div style="background: green; width: 500px; height: 500px;">
        <div class="videowrapper">
            <div id="video1">
                <iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</body>

有谁知道解决方法？

4

1 回答 1

1

在通过 javascript 显示/隐藏的 jQuery Mobile 页面上嵌入 Brightcove 视频时遇到了类似的问题。适用于所有桌面浏览器和 android，但不适用于 iOS 6 上的 Safari。

根据http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/mp/17558#M2352一种解决方法是隐藏你的 videowraper通过使用一些 CSS 将其移出屏幕，position:absolute;top:-9999px然后在您想要显示它时恢复正常定位。

对于 jQuery Mobile 用户，这意味着在单个页面结构上嵌入多个视频 iframe<div data-role="page">将不起作用，需要将它们放在单独的 html 页面上。

于 2012-12-12T00:02:17.427 回答