Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 173

var player = document.getElementById("player");
player.src = clip.data.videoUrl;
});
}
The iteminvoked event passes a detail object to handlers with an itemIndex property that simply
returns the 0-based index of the clicked item. It should be noted, though, that there's no guarantee
that the index really points to the clicked item.
In other words, you may think that, by knowing the index of the clicked item, you're pretty
much done and all that remains to do is select the corresponding object from the bound list.
Well, depending on the number of categories defined, and the distribution of video clips among
categories, the index you get may or may not match the displayed video clip. For example, you may
click with the intention of playing video ABC and receive an index of three. However, index three in
the bound list may not be video ABC.
The point is that you bind items in a given order, but then items are rearranged based on
categories. The index you receive refers to the rearranged order of items; not the original order. For
this reason, you need to resort to the itemPromise property:
eventInfo.detail.itemPromise.then(function (clip) {
// clip now matches the clicked item
}
The itemPromise property starts an internal search that uses the index as the key to locate the
bound item actually displayed in that position. Once the object has been found, the ListView returns
the object which can then be processed by your code.
playing YouTube video clips
In order to play YouTube videos from your page, you need an IFRAME element that embeds the clip.
So as a first step, you add the following markup to default.html :
<div id="player-container">
<iframe id="player" height="100%" width="100%" type="text/html"></iframe>
</div>
The IFRAME element misses the URL of the video. The URL is provided dynamically as the user
clicks a given item in the list view. Usually, the YouTube URL takes the following form:
http://www.youtube.com/embed/<id>
The id placeholder indicates the ID of the video. However, this approach just doesn't work in
Windows Store applications. The reason is that, by default in the IFRAME body, YouTube inserts a