3

私は、2 つのナビゲーション可能なページを持つメディア再生アプリに取り組んでいます。ユーザーが動画ページから移動して戻ってきた場合に、同じオブジェクトが div に読み込まれ、ユーザーが中断したところから簡単に再開できるように、動画オブジェクトを保存したいと思います。

私の問題: ユーザーが動画ページに戻ると、動画要素が最初から再読み込みされ、既存の動画データを読み込むことができません。その結果、画面にビデオが表示されません。ただし、プレーヤー コントロールは元のビデオ オブジェクトに関連付けられており、期待どおりに動作し続けます。

私はこれらの言語に慣れていないので、アドバイスがあればとても助かります。一生解けません。

これがコードです。mediaSession とフラグを別のスクリプトで初期化して、ページ ナビゲーション中に保持されるようにします。

プレーヤー ページの HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homepage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/mediacontent/mediacontent.css" rel="stylesheet" />
<!--    <script src="/js/appData.js"></script> -->
    <script src="/pages/mediacontent/mediacontent.js"></script>

</head>
<body>
    <div class="body_div">
        <header id="header_titlearea">
            <h1 class="win-type-ellipsis">
                <img src="/images/logo.png" /><span> Decoder Sample App</span>
            </h1>
        </header>
       <div id="article_maintext">
           <video id="playbackVideo" height="100%" preload="auto">
           <!--<video id="Video1" height="100%" preload="auto" >-->
                    <!--<source src="/media/demo.mp4" />-->
           </video>
        </div>

         <footer id="footer">
             <br />
             <input type="range" class="s_Class" id="s_Seek" value="0"><br />
             <button class="action secondary" id="b_playFromFile">File Picker</button>
             <button class="action secondary" id="b_playbackPause">Play</button>
             <button class="action secondary" id="b_playbackStop">Stop</button>
             <button class="action secondary" id="b_playbackRewind">Rewind</button>
             <button class="action secondary" id="b_playbackForward">Forward</button>
             <button class="action secondary" id="b_playbackMute">Mute</button>
             <button id="navButton" class="navButton" title="Nav" >About</button><br />
             <p id="outputtext">debug monitor</p>
         </footer>
      </div>

</body>
</html>

プレイヤーページJS（抜粋）：

(function f() {
    "use strict";

    WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
        ready: function(element, options) {
            if (mediaSession.navflag === false) {
                mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
                mediaSession.vid.src = "/media/demo.mp4";
                document.getElementById('outputtext').innerHTML = "new mediaSession set!"
            } else if (mediaSession.navflag === true) {
                if (mediaSession.pauseflag === false) {
                    //mediaSession.vid.play();
                }
                document.getElementById('outputtext').innerHTML = "existing mediaSession!"
                *-Here is where I need help-*
                mediaSession.navflag = false;
            }
...
        }
    }
}
4

1 に答える 1

1

いくつかの誤ったリードの後、replaceChild() メソッドを使用して、リロードされたビデオ要素をビデオ データと交換する方法を見つけました。

新しい JavaScript は次のようになります。

  (function f() {
    "use strict";

    WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
        ready: function(element, options) {
            if (mediaSession.navflag === false) {
                mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
                mediaSession.vid.src = "/media/demo.mp4";
                document.getElementById('outputtext').innerHTML = "new mediaSession set!"
            } else if (mediaSession.navflag === true) {
                if (mediaSession.pauseflag === false) {
                    //mediaSession.vid.play();
                }
                document.getElementById('outputtext').innerHTML = "existing mediaSession!"
                var mediaParent = document.getElementById("article_maintext");
                mediaParent.replaceChild(mediaSession.vid, mediaParent.firstElementChild);
                mediaSession.navflag = false;
            }
...
        }
    }
}
于 2012-10-19T00:10:16.077 に答える