移动 safari 似乎在导航后卸载 html5 音频/视频

Question

我创建了几个这样的弹出站点：(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();
        }
    });

数据来自 PHP/MySql 服务器。
如您所见，有一个mediaContent 我想在其中绑定音频或视频。
一切正常。但无论出于何种原因，在移动 Safari 上，音频内容似乎都被卸载了。如果在播放音频/视频文件后发生导航。
例如：我在移动 safari 上启动应用程序并打开第一个弹出页面 <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...}

在此之后，我的导航代码是：

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

我第一次在第 3 页（第一个有音频）上导航，我触摸了播放按钮......音频有效。播放暂停...有效。我导航到第 2 页并返回到第 3 页...我可以触摸我想要的，没有音频。
“播放/暂停”按钮

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

}

如果我添加 mymedia.load(); 方法，则适用于音频。但还有其他方法吗？我不想多次加载音频。用load方法播放视频也是不可能的，因为此时视频的全屏模式杀了我的导航。

Answer 1

我不知道为什么，但如果我使用

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

而不是

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

一切正常。