HTML5 오디오/비디오가 iOS의 fancybox 오버레이를 사용하여 작동하지 않습니다.

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 임에도 불구하고). 최신 버전을 다운로드했는데 이제 작동합니다.