在iOS上使用fancybox覆蓋層時，HTML5音頻/視頻無法使用

當我在fancybox覆蓋層中嵌入HTML5音頻/視頻標籤時，音頻/視頻播放器不會使用任何iOS設備（iPhone/iPad）顯示。當調用open_audio_overlay（）時，您可以使用此MP3 http://www.w3schools.com/html5/song.mp3。我正在使用fancybox的第二版（最新的代碼）。我已經提供了下面的代碼，我現在用：在iOS上使用fancybox覆蓋層時，HTML5音頻/視頻無法使用

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

來源

2012-07-13 tool4scs

我經歷過的問題與「控制」以及在iPad上的Safari Mobile中查看時添加到html5視頻元素的「自動播放」屬性。我相信我的問題源於刪除「控件」和/或設置控件不顯示，但我會嘗試先調整它們，看看是否可以從那裏進行更改。

來源

2012-07-13 16:10:58 SouthCoaster

刪除這些屬性並沒有什麼區別。我以前做過這個。我相信這是一個fancybox的問題，因爲如果我使用fancybox之外的音頻/視頻元素，我的代碼工作正常。 – tool4scs 2012-07-13 16:19:51

問題已解決，事實證明我使用的是fancybox的舊版本（即使文件版本在註釋頂部聲明瞭2.0.6）。我下載了最新版本，現在可以使用。

來源

2012-07-17 13:55:52 tool4scs

在iOS上使用fancybox覆蓋層時，HTML5音頻/視頻無法使用

回答

相關問題