Question

我做错了什么，但我不确定是什么。我正在尝试创建一个加载TVML模板的应用程序。从那里，您可以导航到包含所选项目信息的新视图（也是模板）。最后，在此视图中，您可以选择播放视频。它一直有效，直到我播放视图，因为它加载但第二个屏幕在顶部。我必须通过菜单按钮“返回”才能看到视频...... 这是我的代码（简化了菜单和按钮）：

的application.js

var resourceLoader;
App.onLaunch = function(options) {
  var javascriptFiles = [
    `${options.BASEURL}/js/ResourceLoader.js`, 
    `${options.BASEURL}/js/Presenter.js`
  ];

  evaluateScripts(javascriptFiles, function(success) {
    if(success) {
        resourceLoader = new ResourceLoader(options.BASEURL);
      resourceLoader.loadResource(`${options.BASEURL}/templates/Stack.xml.js`, function(resource) {
        var doc = Presenter.makeDocument(resource);
        doc.addEventListener("select", Presenter.load.bind(Presenter));
        Presenter.pushDocument(doc);
      });


    } else {
        var errorDoc = createAlert("Evaluate Scripts Error", "Error attempting to evaluate external JavaScript files.");
        navigationDocument.presentModal(errorDoc);
    }
  });
}

Presenter.js

function getDocument(url) {
     var templateXHR = new XMLHttpRequest();
     templateXHR.responseType = "document";
     templateXHR.addEventListener("load", function() {
            pushDoc(templateXHR.responseXML);}, false);
     templateXHR.open("GET", url, true);
     templateXHR.send();
     return templateXHR;
   }

   function pushDoc(document) {
        navigationDocument.pushDocument(document);
    }

var Presenter = {

  makeDocument: function(resource) {
    if (!Presenter.parser) {
      Presenter.parser = new DOMParser();
    }
    var doc = Presenter.parser.parseFromString(resource, "application/xml");
    return doc;
  },

  modalDialogPresenter: function(xml) {
    navigationDocument.presentModal(xml);
  },

  pushDocument: function(xml) {
    navigationDocument.pushDocument(xml);
  },

  load: function(event) {
      console.log(event);

      var self = this,
      ele = event.target,

      videoURL = ele.getAttribute("video"),
      templateURL = ele.getAttribute("template"),
      presentation = ele.getAttribute("presentation"); 

      if(videoURL) {   
            var player = new Player();
            var playlist = new Playlist();
            var mediaItem = new MediaItem("video", videoURL);

            player.playlist = playlist;
            player.playlist.push(mediaItem);
            player.present(); 
       }

      if(templateURL) {
            self.showLoadingIndicator(presentation);
            resourceLoader.loadResource(templateURL,
                function(resource) {
                    if (resource) {
                        var doc = self.makeDocument(resource);
                        doc.addEventListener("select", self.load.bind(self));
                        //doc.addEventListener("highlight", self.load.bind(self));
                        if (self[presentation] instanceof Function) {
                            self[presentation].call(self, doc, ele);
                        } else {
                            self.defaultPresenter.call(self, doc);
                        }
                    }
                }
            );             
   }   
 },


 showLoadingIndicator: function(presentation) {
        if (!this.loadingIndicator) {
            this.loadingIndicator = this.makeDocument(this.loadingTemplate);
        }

        if (!this.loadingIndicatorVisible && presentation != "modalDialogPresenter" && presentation != "menuBarItemPresenter") {
            navigationDocument.pushDocument(this.loadingIndicator);
            this.loadingIndicatorVisible = true;
        }
    },

    removeLoadingIndicator: function() {
        if (this.loadingIndicatorVisible) {
            navigationDocument.removeDocument(this.loadingIndicator);
            this.loadingIndicatorVisible = false;
        }
    },


    defaultPresenter: function(xml) {
        if(this.loadingIndicatorVisible) {
            navigationDocument.replaceDocument(xml, this.loadingIndicator);
            this.loadingIndicatorVisible = false;
        } else {
            navigationDocument.pushDocument(xml);
        }
    },

      loadingTemplate: `<?xml version="1.0" encoding="UTF-8" ?>
        <document>
          <loadingTemplate>
            <activityIndicator>
              <text>Loading...</text>
            </activityIndicator>
          </loadingTemplate>
        </document>`   
}

我也使用ResourceLoader.js文件，但我认为它并不重要，因为它是文档中显示的文件。

当应用启动时，我会加载我的第一个“模板”视图。的 Stack.xml.js

var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
  <stackTemplate> 
    <collectionList>
      <carousel>
        <section>
          <lockup>
            <img src="${this.BASEURL}/images/main_carousel/main_carousel001.png" width="1740" height="500" />
            <overlay>
              <title>Title</title>
              <subtitle>1902</subtitle>
            </overlay>
          </lockup>
         </section>
      </carousel>

      <shelf>
        <header>
          <title>Last Added</title>
        </header>
        <section>
          <lockup template="${this.BASEURL}/templates/Product-001.xml.js" presentation="modalDialogPresenter">
            <img src="${this.BASEURL}/images/movies/movie001.png" width="332" height="500" />
            <title class="scrollTextOnHighlight">My Title</title>
          </lockup>
        </section>
      </shelf>

    </collectionList>
  </stackTemplate>
</document>`
}

点击图片后，我使用模板参数加载我的下一个模板。此模板为 Product-001.xml.js

var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
  <productTemplate theme="light">

    <shelf>
        <header>
          <title>Last Added</title>
        </header>
        <section>
          <lockup video="http://trailers.apple.com/movies/focus_features/9/9-clip_480p.mov">
            <img src="${this.BASEURL}/resources/images/movies/movie_520_e2.lcr" width="332" height="500" />
            <title class="showAndScrollTextOnHighlight">Title 2</title>
          </lockup>

        </section>
     </shelf>  
   </productTemplate>
</document>`
}

这是使用视频参数。在第一个“屏幕”上，无论我是否尝试加载模板或视频，一切都有效。但是，相同的代码似乎不适用于第二个屏幕。有人可以帮我吗？我不太了解Javascript。

我看过一些帖子，人们说你必须按照这样的方式将页面推到堆栈上：

var parser = new DOMParser();
var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
navigationDocument.pushDocument(newPageDocument);

如果这是解决方案，如果有人能解释我该代码需要在哪里，我将非常感激。或者如果我想要多个屏幕，我该如何正确实现它。非常感谢你们！

Answer 1

最有可能发生这种情况是因为您使用presentation =“modalDialogPresenter”来加载Product-001.xml.js文件。您的视频可能会留在模式后面，尝试查看按Escape时是否可以看到它。然后删除该部分并再次测试。 “modalDialogPresenter”适用于警报。

Answer 2

嘿，你终于得到了答案。我有类似的问题，我的视频在后台播放。我可以听到音频，但它被覆盖了＃34;按当前模板。我修复它的方式有点像黑客攻击，但我只是简单地解释了播放视频的函数中的当前视图。我的演示者课程中有一个播放视频的功能。我在你的代码中没有看到这个。我认为这就是你所指的。如果这有帮助，请告诉我。

Answer 3

我最终在Presenter文件中执行此操作。它似乎工作正常：

if(templateURL) {
        self.showLoadingIndicator(presentation);
        resourceLoader.loadResource(templateURL,
            function(resource) {
                if (resource) {
                    var doc = self.makeDocument(resource);
                    doc.addEventListener("select", self.load.bind(self));
                    //doc.addEventListener("highlight", self.load.bind(self));
                    if (self[presentation] instanceof Function) {
                      //  self[presentation].call(self, doc, ele);
                        self.defaultPresenter.call(self, doc);
                    } 
                    /* else { self.defaultPresenter.call(self, doc); }
                    */
                }
            }
        );

希望它有所帮助！

TVML - 浏览模板

3 个答案: