mobile Safari scheint html5 Audio/Video nach Navigation

Question

Ich erstelle mehr Popup-Seiten wie diese zu entladen: (function createPopupManual)

success: function (data) { 
      console.log("createPopupManual: Daten erhalten"); 
      var popupVar = ""; 
      var videoArray=[]; 

      if (data.length == 0) { 
       popupVar = "<a href=\"#\" data-rel=\"back\" class=\"ui-btn\">Abbrechen</a>"; 
       $('#popupcardOuterDiv').html(popupVar); 
      } 

      $.each(data, function (i, field) { 
       var displaynone = ""; 
       var pageToHide = field.step; 
       var nextPage = parseInt(field.step)+1; 
       var prevPage = parseInt(field.step)-1; 

       var mediaContent = ""; 
       switch (field.medium) { 
        case "image": 
         mediaContent = "<div class=\"fullsize\" style=\"background-image: url(images/cardtodo/images/"+field.filename+");\"></div>"; 
         break; 

        case "video": 
         mediaContent = "<video class=\"\" id=\"video"+field.step+"\" controls preload='auto' width='320' height='240'>"+ 
              "<source src=\"images/cardtodo/movies/"+field.filename+"\" type=\"video/mp4\">"+ 
             "</video>"; 
         break; 

        case "audio": 
         mediaContent = "<audio class=\"\" id=\"audio"+field.step+"\" controls>"+ 
              "<source src=\"images/cardtodo/audio/"+field.filename+"\" type=\"audio/mp3\">"+ 
             "</audio>"+ 
             "<br /><button onclick=\"playPause('audio', "+field.step+")\">Play/Pause</button>"; 
         break; 

        default: 
         break; 
       } 

       if (field.step > 1) { 
        displaynone = "display: none;"; 
       } 

       popupVar = popupVar + "<div id=\"popuppage"+field.step+"\" style=\"height: 100%; width: 100%;"+displaynone+"\">"+ 
             "<div class=\"popupTopLeft\">"+ 
              "<div style=\"position:relative;\">"+ 
               "<h1>Schritt"+ field.step +"</h1>"+ 
               "<p>"+ field.text +"</p>"+ 
              "</div>"+ 
             "</div>"+ 
             "<div class=\"popupTopRight\">"+ 
              mediaContent + 
             "</div>"+ 
             "<div class=\"popupBottomLeft\">"+ 
              "<a href=\"javascript:showPopupPage("+pageToHide+","+ prevPage +",1)\" class=\"ui-btn\">zur&uuml;ck</a>"+ 
              "<a href=\"#\" data-rel=\"back\" class=\"ui-btn\">Abbrechen</a>"+ 
             "</div>"+ 
             "<div class=\"popupBottomRight\">"+ 
              "<a href=\"javascript:showPopupPage("+pageToHide+","+ nextPage +",2)\" class=\"ui-btn\">weiter</a>"+ 
             "</div>"+ 
            "</div>";  
      }); 
      $('#popupcardOuterDiv').html(popupVar); 
      callback(); 
     } 
    }); 

Daten stammen aus einem PHP/MySQL-Server.
Wie Sie sehen, gibt es eine mediaContent, wo ich in Audio oder Video binden möchte.
das alles funktioniert. Aus irgendeinem Grund scheint es auf einer mobilen Safari, dass der Audioinhalt entladen wird. wenn eine Navigation stattfindet, nach der Wiedergabe von Audio/Video-Datei.
Zum Beispiel: Ich habe die App auf mobilen Safari starten und öffnen Sie die erste popuppage <a href="#" data-position-to="window" class="ui-btn manualStartButton" data-card-id="1">Anleitung starten</a>

$('.manualStartButton').on("click", function(){ 
       var $popup = $('#cardpopup'); 
       $popup.data("manualToLoad", $(this).data('card-id')); 
       $popup.popup('open'); 
      }); 

$('#cardpopup').on({ 
        popupbeforeposition: function(){ 
         var h = $(document).height()-50; 
         var w = $(document).width()-50; 
         $("#cardpopup").css({ 
             "height": h, 
             "width": w 
         }); 

         createPopupManual($(this).data("manualToLoad"), function(){...doSomeCSSVoodoo...} 

danach, mein Navigationscode ist:

function showPopupPage(pageToHide, pageToShow, direction){ 
    if ($('#video'+pageToHide).length) { 
     if ($('#video'+pageToHide).get(0).paused) { 
      // Do nothing 
     }else{ 
      $('#video'+pageToHide).get(0).pause();    
     } 
     //$('#video'+pageToHide).get(0).currentTime = 0; 
    } 

    if ($('#audio'+pageToHide).length) { 
     if ($('#audio'+pageToHide).get(0).paused) { 
      // Do nothing 
     }else{ 
      $('#audio'+pageToHide).get(0).pause(); 
     } 
     $('#audio'+pageToHide).get(0).currentTime = 0; 
    } 

    $('#popuppage'+pageToHide).hide(); 
    if (direction == 1){ 
     $('#popuppage'+pageToShow).show("slide", {direction: "left"}, 500); 
    }else{ 
     $('#popuppage'+pageToShow).show("slide", {direction: "right"}, 500); 
    } 
} 

Ich navigiere auf Seite 3 (die erste mit Audio) das erste Mal, ich tippe auf den Play-Button ... Audio funktioniert. Pause spielen ... funktioniert. Ich navigiere zu Seite 2 und zurück zu 3 ... ich kann berühren, was ich will, kein Audio.
die "Wiedergabe/Pause" Taste

function playPause(type, mediaId) { 
if (type=="audio") 
    mymedia = $('#audio'+mediaId).get(0); 
else 
    mymedia = $('#video'+mediaId).get(0); 

if (mymedia.paused){ 
    mymedia.play(); 
}else{ 
    mymedia.pause(); 
} 

}

Arbeiten an Audio-, wenn ich die mymedia.load(); Methode hinzufügen. Aber gibt es einen anderen Weg? Ich möchte den Ton nicht mehrmals laden. mit der load-methode ist auch video-playback unmöglich, weil der fullscreenmode des video meine navigation zu diesem zeitpunkt umbringt.

Answer 1

ich weiß nicht, warum, aber wenn ich

verwenden

<audio src="images/cardtodo/audio/myaudio1.mp3" controls></audio> 

statt

<audio controls> 
<source src="images/cardtodo/audio/myaudio1.mp3" type="audio/mp3"> 
</audio> 

alles funktioniert gut.