AAMP player stream is not visible

So ihave a multi page(implemented using lng.Router) lightning app it has a player page(code attached in above image) which streams dash content using AAMPPlayer but somehow the video stream is not visible. But when I implemented only a single page (only player) app the video stream is visible, I can’t figure out how to fix this. Please help.

I’d recommend the VideoPlayer plugin. From there, use its load() method to load the DASH/AAMP player. Adding the video element manually to the DOM as you’re doing is not the recommended way in Lightning.

Also, I noticed that you’re calling this.tag('MediaPlayer') but there’s no component in your template that has this name, so you’re getting a reference to nowhere.

I am using this method of adding the video element to the dom because i was following this and this documentation. Can you please suggest what shuold i modify in above code using VideoPlayer and load().

Also that MediaPlayer tag code is redundant it is of no use because that else block will never run since we are only using dash streams to play video.