This project is read-only.

Channel 9 video player sample

This sample and tutorial demonstrates how to read the RSS feed for the Channel 9 weekly videos and play them using the Microsoft Media Platform Player Framework for JavaScript in a Windows 8 Metro style app.

c9sample.png

The application consists of only one HTML page and one associated JS file. Download the sample to run it and explore the source code for yourself. Here are some of the key pieces of the sample:

default.html

<div class="itemlistsection" aria-label="List column">
    <div class="itemlist" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', tapBehavior: 'toggleSelect' }"></div>
</div>
<div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
    <article>
        <header class="header">
            <div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{ width: 512, height: 288, isFullScreenVisible: true }" data-win-bind="winControl.src: video"></div>
            <div class="text">
                <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                <h4 class="article-subtitle" data-win-bind="innerHTML: link"></h4>
            </div>
        </header>
        <div class="article-content" data-win-bind="innerHTML: content"></div>
    </article>
</div>
On the left there is a WinJS ListView control that will contain a list of the videos retrieved from the RSS feed. On the right there are two div tags. One for the player framework to play the video and the other for details about the video.

You may have noticed that we told the MediaPlayer control to bind its src property to the currently selected video and to show the full screen button in the player's control panel.

<div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{ width: 512, height: 288, isFullScreenVisible: true }" data-win-bind="winControl.src: video"></div>

default.js

The primary tasks for JavaScript are to:

1) Initialize the page with data from the RSS feed.

var feed = [];

// retrieve and parse the RSS feed
var promise = WinJS.UI.processAll().then(function () {
    return WinJS.xhr({ url: "http://channel9.msdn.com/Shows/This+Week+On+Channel+9/RSS" }).then(
        function (result) {
            try {
                var items = result.responseXML.querySelectorAll("rss > channel > item");
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var feedItem = {};
                    feedItem.title = item.querySelector("title").textContent;
                    feedItem.link = item.querySelector("link").textContent;
                    feedItem.description = item.querySelector("description").textContent;
                    feedItem.thumbnail = item.querySelector("thumbnail[width='100']").getAttribute("url");
                    feedItem.video = (item.querySelector("group > content[url$='manifest']") || item.querySelector("enclosure")).getAttribute("url");
                    feed.push(feedItem);
                }
            } catch (error) {
                throw "Unable to parse feed (status: " + result.status + ")";
            }
        },
        function (result) {
            throw "Unable to retrieve feed (status: " + result.status + ")";
        }
    );
});

// populate the ListView with feed data
promise.done(initialize);
2) Handle the onselectionchanged event on the ListView to update the panel on the right.

function onSelectionChanged(args) {
    var listView = document.querySelector(".itemlist").winControl;

    // By default, the selection is restriced to a single item.
    listView.selection.getItems().done(function (items) {
        if (items.length > 0 && itemSelectionIndex !== items[0].index) {
            itemSelectionIndex = items[0].index;
            var details = document.querySelector(".articlesection");
            WinJS.Binding.processAll(details, items[0].data);
            details.scrollTop = 0;
        }
    });
}
Note: because autoplay is turned off by default, video playback will begin once the user clicks the play button on the player.

Last edited Sep 4, 2012 at 8:14 PM by billyzkid, version 21