1

HTML5オーディオ/ビデオタグをfancyboxオーバーレイに埋め込むと、iOSデバイス（iPhone / iPad）を使用してオーディオ/ビデオプレーヤーが表示されません。open_audio_overlay（）を呼び出すときは、このMP3http://www.w3schools.com/html5/song.mp3を使用できます。私はfancyboxのバージョン2（最新のコード）を使用しています。私が使用している次のコードを提供しました。

CSS：

div.overlay .fancybox-skin
{
    background: #1f1f1f;
    border-radius: 8px;
    color: white;
}

div.overlay-content
{
    background-color: black;
    padding: 20px 10px 20px 10px;
    border-radius: 4px;
}

div#audio-overlay
{
    display: none;
    text-align: center;
}

HTML：

<div id="audio-overlay">
    <div class="overlay-content">
        <div id="audio-title" style="margin-bottom: 10px; text-align: center; font-weight: bold;"></div>
            <audio id="audio-player" controls="controls" autoplay="autoplay"></audio>
    </div>
</div>

JAVASCRIPT：

function open_audio_overlay(url, title)
{
    $('#audio-player').attr('type', 'audio/mp3');
    $('#audio-player').attr('src', url);

    $('#audio-title').html(title);

    $.fancybox.open($('#audio-overlay'),
    {
        wrapCSS: 'overlay',
        openEffect: 'none',
            helpers:
            {
                overlay:
                {
                    opacity: 0.50,
                    closeClick: false,
                    css:
                    {
                        cursor: 'auto'
                    }
                }
            }
    });
}
4

2 に答える 2

0

iPadのSafariMobileで表示したときに、html5ビデオ要素に追加された「controls」および「autoplay」属性で問題が発生しました。私の問題は、「コントロール」の削除やコントロールが表示されないように設定したことに起因すると思いますが、最初にこれらを調整して、そこから変更を取得できるかどうかを確認します。

于 2012-07-13T16:10:58.360 に答える
0

問題は解決しました。古いバージョンの fancybox を使用していることがわかりました (ファイル バージョンのコメントの上部に 2.0.6 が記載されています)。最新のものをダウンロードしたところ、動作するようになりました。

于 2012-07-17T13:55:52.253 に答える