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によると、回避策はビデオラッパーを非表示にすることですCSS などを使用して画面の外に移動し、表示しposition:absolute;top:-9999pxたいときに通常の位置に戻します。

jQuery Mobile ユーザーの場合、単一のページ構造に複数のビデオ iframe を埋め込むこと<div data-role="page">は機能せず、別の html ページに配置する必要があることを意味します。

于 2012-12-12T00:02:17.427 に答える