A very common question developers and designers have is when to use the Shared Viewport or Custom Viewport in a Media Center application.  The sample code associated with this post illustrates how to create a Custom Viewport (and comment one line of code to get a Shared Viewport).

Download the Sample Code

To answer, we can list out the differences between the two, view screenshots of the implementations and understand their intended usage and limitations.

Shared Viewport

• Non-customizable media window.
• Always located at the lower left.
• Contains two types of content...
• Video (Figure 1)
• Audio Song Title, Cover Art (Figure 2)
• The Shared Viewport is the default playback experience for the PlayMedia or PlayMediaEx method calls.
• Can take and lose focus.
• Can be hidden while media playback continues.
• The dimensions or aspect ratio of the Shared Viewport CANNOT be changed.
• The user can select the Shared Viewport to go full screen with the experience.
• The Shared Viewport is always shown when the user leaves an extensibility application and returns to Media Center with a media experience playing.
• Use a Shared Viewport when the current media experience is secondary in nature to the other content on the page.

Figure 1 - Shared Viewport with video source (click to see larger version).

Figure 2 - Shared Viewport with audio source (click for larger version).

Custom Viewport

• Fully customizable media window
• Contains video content only (Figure 3)
• Can show for audio content, but the only thing you get is a black square or rectangle.
• Can take or lose focus.
• Can be hidden while media playback continues.
• The dimensions or aspect ratio of the Custom Viewport CAN be changed.
• Height
• Width
• Aspect Ratio
• You can position the Custom viewport anywhere on screen.
• You must use the HideCustomViewPort event to persist the Custom Viewport between pages.
• Use a Custom Viewport when the content is highly relevant to other metadata or action items on the page.

Figure 3 - Custom Viewport with video source (click for larger version).