This project is read-only.

Using asynchronous "src" for playlist plugin

Topics: Windows 8 JavaScript
Jul 30, 2013 at 4:08 PM

In our app we want to use the playlist plug-in to provide playlists of video. However, the source URL for these videos is protected by timeout-based anti-deeplinking measures (not unlike S3 tokens/hashes). So, normally when we want to provide a video source to the PlayerFramework we generate the temporary URL, which must be done asynchronously because it involves a WinJS.xhr call to a back-end system that generates URLs, and then update the "src" attribute of the player, e.g.:
WinJS.xhr({ url: some_url }).then(
    function(data) {
        // update playerframework src
        player.src = JSON.parse(data.response).src;
Unfortunately, this cannot be done when using the playlist-plugin since it seems to require that the src is always a (static) attribute. Our workaround for now is to provide a dummy "src" in the playlist and catch the "loading" event of the player to perform the async call and manually update the source of the player. This does trigger some weird behaviour in the player (flashing controls, reloading of the source obviously) and requires a lot of hoops to jump through.

Any ideas on how we could do this the "proper" way? Like setting the "src" of the playlist item to a function which accepts a callback in some way? Or deferring the loading of the next playlist item until we complete some other async function?

Jul 31, 2013 at 12:35 AM
@tieleman, I'm excited you asked :) there is a nifty little feature made just for this kind of thing...
You still need to use a dummy url and wire up to the loading event but you can set a deferral from that event to get the player to wait for your async operation to complete before passing the src onto the video tag. Here's some example code (typing from memory/untested):
onMediaPlayerLoading: function (e) {
        var promise = this.getRealUrlAsync().then(function(myNewSourceUrl) { e.detail.src = myNewSourceUrl; });
Jul 31, 2013 at 7:18 AM
Edited Jul 31, 2013 at 9:55 AM
Great! I'll give that a go today and try it out. That should prevent the player from attempting to load the dummy src, right?

Just out of curiousity, did I miss something in the docs here? And does this work for all PlayerFramework events?

edit: great, this works! Just be sure to set the src on e.detail.src and not directly on the player.