How to debug on TVML <mediaContent> tag's “Player” feature?

I am trying to implement some TVML code into an existing project, in which I try to put an embedded video into. However, the playback part of the code failed, and failed silently.

The code I am using are from the WWDC 2016 presentation (slide 98-102)


<lockup>
  <mediaContent playbackMode="always">
  <!--I changed the playbackMode from onFocus to always-->
    <img src="http://host/image.jpg" width="548" height="308"/>
  </mediaContent>
<lockup>


var mediaContentElement = document.getElementsByTagName('mediaContent').item(0);
var player = mediaContentElement.getFeature('Player');
player.playlist = playlist;



The weird part of the story is--- this code actually works on other projects, just not mine. I console.log the player, the playlist and nothing seems to be off anywhere, no error or what so ever. Besides of course, the video isn't playing.


I looked at the http server and the TVML didn't even request the video resource. It looks to me something when wrong between player.playlist = playlist; and the player actually start to play, which is a total blackbox to me.


Given the popularity of TVML, these are the only 2 useful documentations that talk about this TVML tag's "Player" feature.


Apple TV Markup Language Reference-- Compound Multimedia Elements

https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/CompoundMultimediaElements.html#//apple_ref/doc/uid/TP40015064-CH46-SW3


TVML Guide: Core concepts in TVML and TVMLKit-- Server/PlaybackVideo/index.js

https://developer.apple.com/library/content/samplecode/TVMLGuide/Listings/Server_PlaybackVideo_index_js.html



Wonder if anyone have any idea on how to even approach this issue, or what might had went wrong.

Replies

Did you setup the playlist before onAppear() for the document?

yes, indeed I did it onLaunch


App.onLaunch = function(options) {


     var alertString = `<?xml version="1.0" encoding="UTF-8" ?>
    <document>
    <stackTemplate>
    <row>
    <lockup style="padding-top: 50; tv-align: center;" >
    <mediaContent playbackMode="always" id="hero_video" audioMode="always">
    <img src="http:/
    </mediaContent>
    </lockup>

    </row>

    </stackTemplate>
    </document>`;

    var parser = new DOMParser();
    var alert = parser.parseFromString(alertString, "application/xml");


    var mediaContentElement = alert.getElementById('hero_video');
    if (mediaContentElement){
        hero_player = mediaContentElement.getFeature('Player');
        var singleVideo = new MediaItem('video', "http://somevideo.mp4");
        var videoList = hero_player.playlist;
        if (!videoList || videoList.length==0){
            videoList = new Playlist();
        }
        videoList.push(singleVideo);
  
        hero_player.playlist = videoList;
    }

    navigationDocument.pushDocument(alert);
}



like this