1

当我将 HTML5 音频/视频标签嵌入到 fancybox 覆盖中时，音频/视频播放器不会使用任何 iOS 设备（iPhone/iPad）显示。调用 open_audio_overlay() 时，您可以使用此 MP3 http://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

I have experienced problems with "controls" and "autoplay" attributes added to html5 video elements when viewed in Safari Mobile on the iPad. I believe my problems stemmed from the removal of "controls" and/or setting controls to not be displayed but I would attempt adjusting these first and see if you can get a change from there.

于 2012-07-13T16:10:58.360 回答
0

问题解决了，原来我使用的是旧版本的 fancybox（即使文件版本在评论顶部声明为 2.0.6）。我下载了最新的，现在可以使用了。

于 2012-07-17T13:55:52.253 回答