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

Question

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

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

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