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

Posted 2023-05-08

【中文标题】移动 safari 似乎在导航后卸载 html5 音频/视频

【英文标题】：mobile safari seems to unload html5 audio/video after navigation

【发布时间】：2016-11-21 14:12:04

【问题描述】：

我创建了几个这样的弹出站点：(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方法播放视频也是不可能的，因为此时视频的全屏模式杀了我的导航。

【参考方案1】：

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

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

而不是

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

一切正常。