Skip to content

Technique SL17:Providing Static Alternative Content for Silverlight Media Playing in a MediaElement

Applicability

  • Microsoft Silverlight, versions 3 and greater
  • Silverlight managed programming model and Silverlight XAML
Note

Microsoft has stopped updating and distributing Silverlight, and authors are encouraged to use HTML for accessible web content.

This technique is not referenced from any Understanding document.

Description

The objective of this technique is to replace a Silverlight MediaElement with static alternative non-media content that is not time-based. The static alternative content replaces the media in the same or a nearby user interface region of the Silverlight application.

A Silverlight application user interface can be adjusted at run time by removing elements from the visual tree, and adding new elements to the visual tree. In this case, the user interface is designed to provide a control that the user activates to display the static alternative content, which is often a control that displays text, or a text element.

Examples

Example 1: MediaElement playing audio, replace with transcript

This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement has no visual representation itself and is 0x0 size because it plays audio only. As a simple placeholder, this example displays the text "Library of Congress Audio" to represent the media element as something visible in the UI. In addition to Play/Stop controls, this interface includes a Display Transcript button. Activating the button displays static text that represents the transcript of the audio. The following is the basic UI in XAML.

<UserControl x:Class="ReplaceAudioWithTranscriptText.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <UserControl.Resources>
       <sys:String x:Key="transSpeakerName">Matt Raymond: </sys:String>
       <sys:String x:Key="transText">This is Matt Raymond at the Library of Congress.
Each year thousands of book lovers of all ages visit the nation's capital to celebrate the joys 
of reading and lifelong literacy, at the Library of Congress National Book Festival. 
For the first time in the festival's nine year history, President Barack Obama and 
First Lady Michelle Obama will serve as honorary chairs of this free event. </sys:String>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White" >
       <TextBlock FontSize="30" Foreground="Blue">Library of Congress Audio</TextBlock>
       <MediaElement Source="/locintro.wma" AutoPlay="False" Name="player" Height="0" />
       <StackPanel Orientation="Horizontal" Name="ControlBar">
           <Button Name="Play" Click="Play_Click">Play</Button>
           <Button Name="Stop" Click="Stop_Click">Stop</Button>
           <Button Name="TextAlt" Click="TextAlt_Click">Display Transcript</Button>
       </StackPanel>
   </StackPanel>
</UserControl>

The following is the C# logic.

   public partial class MainPage : UserControl
   {
       RichTextBox rtb;
       bool transDisplayed=false;
       public MainPage()
       {
           InitializeComponent();
           rtb = new RichTextBox();
           rtb.IsReadOnly = true;
           Paragraph p = new Paragraph();
           Run speakerName = new Run();
           speakerName.Text = this.Resources["transSpeakerName"] as String;
           speakerName.FontWeight = FontWeights.Bold;
           Run transText = new Run();
           transText.Text = this.Resources["transText"] as String;
           p.Inlines.Add(speakerName);
           p.Inlines.Add(transText);
           rtb.Blocks.Add(p);
       }
       private void Play_Click(object sender, RoutedEventArgs e)
       {
           player.Play();
           Play.IsEnabled = false;
       }
       private void Stop_Click(object sender, RoutedEventArgs e)
       {
           player.Stop();
           Play.IsEnabled = true;
       }
       private void TextAlt_Click(object sender, RoutedEventArgs e)
       {
           Panel parent = (player.Parent as Panel);
           if (!transDisplayed)
           {
               DisplayTranscript();
               (sender as Button).Content = "Hide Transcript";
               transDisplayed = true;
           }
           else
           {
               parent.Children.Remove(rtb);
               (sender as Button).Content = "Display Transcript";
               transDisplayed = false;
           }
       }
       private void DisplayTranscript()
       {
           Panel parent = (player.Parent as Panel);
           parent.Children.Add(rtb);
       }

This example is shown in operation in the working example of Replace Audio With Transcript.

Other sources

No endorsement implied.

Tests

Procedure

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. That application has audio-only media content and is expected to supply a text alternative, or has media that is expected to be replaced entirely with a transcript or similar text alternative.
  2. Check for a control that indicates that activating it will supply static alternative content for the media. Activate the control.
  3. Verify that the media control is replaced with alternate content, and that assistive technologies represent the change to the user interface.

Expected Results

#3 is true.

Back to Top