Win8 Metro（JS/HTML5） - 頁面導航後看不到視頻

我正在研究具有兩個可導航頁面的媒體播放應用程序。我想存儲視頻對象，以便如果用戶離開視頻頁面然後返回，則將相同的對象加載到該div中，並且用戶可以簡單地拾取他們離開的位置。Win8 Metro（JS/HTML5） - 頁面導航後看不到視頻

我的問題：當用戶返回到視頻頁面時，視頻元素將從頭開始重新加載，我無法使用預先存在的視頻數據加載它。因此，屏幕上沒有可見的視頻。但是，我的播放器控件與原始視頻對象綁定，並繼續按預期工作。

我是新來的這些語言，所以任何建議將是一個很大的幫助。我無法想象出我的生活。

這是代碼。我將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; 
      } 
... 
     } 
    } 
}

來源

2012-10-18 Nic

一些假線索後，我想出如何換出重裝上陣視頻元素與我的視頻數據，使用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-19 00:10:16 Nic

Win8 Metro（JS/HTML5） - 頁面導航後看不到視頻

回答

相關問題