Question

当我将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'
                    }
                }
            }
    });
}

Answer 1

在iPad上的Safari Mobile中查看时，我遇到了将“控件”和“自动播放”属性添加到html5视频元素的问题。我相信我的问题源于删除“控件”和/或设置控件不显示但我会首先尝试调整它们，看看你是否可以从那里进行更改。

Answer 2

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

在iOS上使用fancybox overlay无法使用HTML5音频/视频

2 个答案: