How to use headers

[3rror404]

I can't see any documentation on the headers property other than...

headers - (Map<string, string>)

How is this actually used? I have tried to bind to a property that holds a Map object but this does not seem to work.

for (let i = 0; i < context.videos.length; i++) {
        var myMap = new Map();
        myMap.set('Authorization', "TEST");
        context.videos[i].headers = myMap;
        pageData.videos.push(fromObject(context.videos[i]));
    }

<Repeater row="1" id="video-repeater" items="{{ videos }}">
    <Repeater.itemTemplate>
        <StackLayout class="list-item" backgroundColor="yellow" >
            <VideoPlayer:Video id="nativeVideoPlayer"
                                controls="true" loaded="onVideoPlayerLoad"
                                loop="false" autoplay="false"
                                videoFill="aspect"
                                headers="{{ headers }}"
                                src="{{ proURL }}" class="video-player" />
         </StackLayout>
    </Repeater.itemTemplate>
</Repeater>

I also tried setting the property on the <VideoPlayer:Video /> element without success

exports.onVideoPlayerLoad = function(args) {
    var videoPlayerTest = page.getViewById('nativeVideoPlayerTest');

    var myMap = new Map();
    myMap.set('Authorization', "TEST");

    videoPlayerTest.headers = myMap;
}

<VideoPlayer:Video id="nativeVideoPlayerTest"
                controls="true" loaded="onVideoPlayerLoad"
                loop="false" autoplay="false"
                videoFill="aspect"
                src="**SRC**" class="video-player" />

Ideally I would like to be able to use the binding syntax because my videos will be generated using a Repeater control. What is the correct way to do this?

[3rror404]

Setting the header property in the loaded event does actually seem to work. I can work with that so I'll close this issue.