3

我正在开发一个具有两个可导航页面的媒体播放应用程序。我想存储视频对象，这样如果用户离开视频页面然后返回，相同的对象被加载到 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 回答