首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >TVML -浏览模板

TVML -浏览模板
EN

Stack Overflow用户
提问于 2015-09-21 19:02:17
回答 3查看 2K关注 0票数 2

我做了一件很不对的事,但我不太确定是什么。我正在尝试创建一个加载TVML模板的应用程序。从那里,您可以导航到一个新视图(也是一个模板),其中包含有关所选项的信息。最后,在这个视图中,您可以选择播放视频。它可以工作,直到我播放视图,因为它加载,但第二个屏幕在顶部。我必须用菜单按钮“回去”才能看到视频.下面是我的代码(菜单和按钮的简化):

application.js

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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不太了解。

我见过一些帖子,人们说你必须像这样把页面推到堆栈上:

代码语言:javascript
运行
复制
var parser = new DOMParser();
var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
navigationDocument.pushDocument(newPageDocument);

如果这是解决方案,我将非常感激,如果有人能解释我的代码需要在哪里。或者,如果我想要多个屏幕,我如何正确地实现它。非常感谢大家!

EN

回答 3

Stack Overflow用户

发布于 2015-11-09 13:03:04

这很可能是因为您使用presentation="modalDialogPresenter“加载Product-001.xml.js文件。你的视频可能会停留在模式后面,试着看看当你按下逃避键时是否能看到它。然后移除那部分,然后再测试一次。"modalDialogPresenter“是为警报而准备的。

票数 0
EN

Stack Overflow用户

发布于 2015-11-10 03:57:06

嘿,你终于找到答案了。我有一个类似的问题,我的视频是在后台播放的。我可以听到音频,但它被当前模板“覆盖”。我解决这个问题的方式有点像黑客,但我只是简单地dismissedModally播放视频的函数中的当前视图。我在我的演讲课上有一个播放视频的函数,我在你的代码中没有看到这个。我想这就是你所指的。如果这有帮助的话请告诉我。

票数 0
EN

Stack Overflow用户

发布于 2015-11-10 16:31:23

最后我在演示文件中做了这个。它似乎运转良好:

代码语言:javascript
运行
复制
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); }
                    */
                }
            }
        );  

希望能帮上忙!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32702713

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档