Question

这在任何浏览器中都可以正常工作，但不适用于iOS6（不用iOS5试用）

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

<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>

有没有人知道解决方法？

Answer 1

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

根据http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352，一种解决方法是使用position:absolute;top:-9999px之类的CSS将其移出屏幕，然后在想要显示时恢复正常定位，从而隐藏您的视频捕捉器。

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

iOS6 Youtube iFrame在隐藏并再次显示时中断

1 个答案: